第一次完成後如何播放第二個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 */ 

（調整數，以適應）