第一个完成后如何播放第二个 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 */

（调整数字以适应）