在頁面加載後一個接一個地執行元素

Question

我正在處理animate.css - https://daneden.me/animate/，我想知道是否可以讓多個元素使用CSS動畫並在頁面加載時一個接一個地執行。

這是三個不同的元素我想使用：

<img src="flowers.png" data-test="bounceInDown" class="animated bounceInDown" /> 
<img src="dog.png" data-test="bounceInDown" class="animated bounceInDown" /> 
<img src="speechbubble.png" data-test="bounceInDown" class="animated bounceInDown" /> 

我只是需要幫助執行動畫陸續在頁面加載。

謝謝。

Answer 1

如果你想堅持只用CSS，你可以使用animation-delay子屬性時間的出來......添加另一個類的img標記然後添加以下原來的CSS動畫之前CSS ：

img.class1{ 
    animation-delay: 3s; 
    -webkit-animation-delay: 3s; 
} 
img.class2{ 
    animation-delay: 6s; 
    -webkit-animation-delay: 6s; 
} 
img.class3{ 
    animation-delay: 9s; 
    -webkit-animation-delay: 9s; 
} 

你必須做一些來回測試才能使時序正確，但它不應該太複雜。這裏是一個animation-delay在行動中的小提琴：http://jsfiddle.net/Ny4XH/