在页面加载后一个接一个地执行元素

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/