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

(调整数字以适应)