Question

如何为“跳出”类的每个div添加自定义动画延迟？基本上类反弹包含动画css关键帧（animate.css）。现在，我有20个div称为“360player bounce”。但他们都在同一时间反弹。

示例：

<div class="360player bounce">
    <a href="audio/The_Song.mp3">
        The Song
    </a>
</div>

只是想知道我该怎么做。我搜索了整个stackoverflow和谷歌但到目前为止没有运气。

Answer 1

我为流星创造了一个类似的动画。我相信你将不得不创建不同的动画集，每个动画集都有不同的延迟。它取决于你在我的实例中想要实现的目标，我创建了5个，6个不同的动画链，并且每个动画链稍微延迟，所以看起来它们都在不同时间移动。以下示例

@keyframes fallingstars {
    0% {
    opacity: 1;
    transform: translate(0, 0px) rotateZ(0deg);
    }
    25% {
    opacity: 1;
    transform: translate(0px, 0px) rotateZ(deg);
    }
    100% {
    opacity: 0;
    transform: translate(-870px, 500px) rotateZ(310deg);
    }

}

@keyframes fallingstars2 {
    0% {
    opacity: 1;
    transform: translate(0, 0px) rotateZ(25deg);
    }
    25% {
    opacity: 1;
    transform: translate(0px, 0px) rotateZ(deg);
    }
    100% {
    opacity: 0;
    transform: translate(-570px, 600px) rotateZ(210deg);
    }

}



#fallstar {
    animation: fallingstars 12s infinite;
    animation-delay:5s;
    z-index:-1;
}

#fallstar2 {
    animation: fallingstars2 12s infinite;
    z-index:-1;
}


    <img src="stars-ALL.svg" id="fallstar" alt="Stars"  style="width:50px; height:50px; top:0px; right:-50px; position:absolute;" />

您还可以使用jquery / js修改动画以更改延迟。这只是实现此目的的几种方法之一。循环遍历所有div，并为每个div修改动画延迟。我觉得这可能很贵。

Answer 2

我不知道您使用的CSS库是否包含它，所以这里是您正在寻找的特定CSS属性：

http://www.w3schools.com/cssref/css3_pr_animation-delay.asp

您可以在现有CSS动画之上应用此属性，也许可以在页面自己的CSS文件中定义自己的单独类并添加它。

CSS：

.wait300ms {
  animation-delay: 300ms;
  /*TODO: Add cross-browser attributes */
}

HTML：

<div class="360player bounce wait300ms">

使用“bounce”类为每个div添加自定义动画延迟？

2 个答案: