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

（调整数字以适应）