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/

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

1 个答案: