如何在动画之间延迟并在css中的上一个动画之后出现

Question

我想问一下，如何在css中制作动画之间的延迟？我试图制作它，但它仍然出现在开头，然后是动画功能。

我想要的是仅在上一个动画（对象3）之后显示的对象/文本。

这是我在jsfiddle中的代码：[http://jsfiddle.net/sugoi/bV6Pc/]

谢谢

Answer 1

你需要玩不透明度。 我们来看看：fork jsfiddle

.slideRight {
    opacity: 0.0;
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
        opacity: 1;
    }
    <!--...-->
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

但它似乎需要一些js ..

Answer 2

在css动画中，您可以指定延迟，这样您就可以操作这两个动画 syntax - animation：name duration timing-function delay iteration-count direction;