第一个完成后如何播放第二个CSS动画

Question

我遇到了问题。我只想，一旦完成一个CSS3动画，我的下一个动画开始（理想情况下是淡入淡出）

这是第一个动画代码：

#truck {
position: absolute;
margin-top:90px;

-moz-animation: slide 4s;
-webkit-animation: slide 4s;
-ms-animation: slide 4s;
animation: slide 4s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}

@keyframes slide {
0% { left: 0px; }
35% { left: 250px; }
65% { left: 250px; }
100% { left:590px; }
}

@-webkit-keyframes slide {
0% { left: 0px; }
35% { left: 250px; }
65% { left: 250px; }
100% { left:590px; }
}

@-ms-keyframes slide {
0% { left: 0px; }
35% { left: 250px; }
65% { left: 250px; }
100% { left:590px; }
}

如果有人可以帮助我完成第二部动画以及第一部动画完成后如何打电话，我将不胜感激。

Answer 1

我认为你可以使用延迟：

animation-delay:4s;
-moz-animation-delay:4s; /* Firefox */
-webkit-animation-delay:4s; /* Safari and Chrome */
-o-animation-delay:4s; /* Opera */

（调整数字以适应）