每个子元素都有延迟的 CSS 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8294400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Animations with delay for each child element
提问by Seka
I am trying to create a cascading effect by applying an animation to each child element. I was wondering if there is a better way to do it than this:
我试图通过对每个子元素应用动画来创建级联效果。我想知道是否有比这更好的方法：
.myClass img:nth-child(1){
-webkit-animation: myAnimation 0.9s linear forwards;
}
.myClass img:nth-child(2){
-webkit-animation: myAnimation 0.9s linear 0.1s forwards;
}
.myClass img:nth-child(3){
-webkit-animation: myAnimation 0.9s linear 0.2s forwards;
}
.myClass img:nth-child(4){
-webkit-animation: myAnimation 0.9s linear 0.3s forwards;
}
.myClass img:nth-child(5){
-webkit-animation: myAnimation 0.9s linear 0.4s forwards;
}
and so on... So basically, I'd like to have an animation starting for each child but with a delay. Thanks for any input!
等等......所以基本上，我想为每个孩子制作一个动画，但有延迟。感谢您提供任何意见！
Addition: Maybe I did not properly explain what was my concern: It's about how to do this no matter how many children I have. How to do this without having to write down the properties for every child... for example, when I don't know how many children there are going to be.
补充：也许我没有正确解释我关心的是什么：不管我有多少个孩子，如何做到这一点。如何做到这一点而不必写下每个孩子的属性……例如，当我不知道将有多少个孩子时。
回答by CherryFlavourPez
What you want is the animation delayproperty.
你想要的是动画延迟属性。
@keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.myClass img {
float: left;
margin: 20px;
animation: FadeIn 1s linear;
animation-fill-mode: both;
}
.myClass img:nth-child(1) { animation-delay: .5s }
.myClass img:nth-child(2) { animation-delay: 1s }
.myClass img:nth-child(3) { animation-delay: 1.5s }
.myClass img:nth-child(4) { animation-delay: 2s }<div class="myClass">
<img src="http://placehold.it/200x150" />
<img src="http://placehold.it/200x150" />
<img src="http://placehold.it/200x150" />
<img src="http://placehold.it/200x150" />
</div>A CSS preprocessor such as Less.jsor Sasscan reduce the amount of repetition, but if you're working with an unknown number of child elements or need to animate a large number then JavaScript will be the best option.
CSS 预处理器（例如Less.js或Sass）可以减少重复量，但如果您正在处理未知数量的子元素或需要为大量元素设置动画，那么 JavaScript 将是最佳选择。
回答by robshearing
Here's a scss way to do it using a for loop.
这是使用 for 循环执行此操作的 scss 方法。
@for $i from 1 through 10 {
.myClass img:nth-child(#{$i}n) {
animation-delay: #{$i * 0.5}s;
}
}
回答by Steven Vachon
In the [hopefully near] future when attrand calcare fullysupported, we'll be able to accomplish this without JavaScript.
在 [希望不久] 的将来，当attr并calc得到完全支持时，我们将能够在没有 JavaScript 的情况下完成这项工作。
HTML:
HTML：
<ul class="something">
<li data-animation-offset="1.0">asdf</li>
<li data-animation-offset="1.3">asdf</li>
<li data-animation-offset="1.1">asdf</li>
<li data-animation-offset="1.2">asdf</li>
</ul>
CSS:
CSS：
.something > li
{
animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));
}
This would create an effect where each list item animates in what would appear to be random order.
这将创建一种效果，其中每个列表项都以随机顺序进行动画处理。
回答by Adk96r
You can also make use of the transition-delay property in CSS and use JS or JQuery to assign a different delay for each child element . ( Assume s to be the starting delay in seconds )
您还可以利用 CSS 中的 transition-delay 属性，并使用 JS 或 JQuery 为每个子元素分配不同的延迟。（假设 s 是以秒为单位的启动延迟）
$(".myClass img").each(function(index){
$(this).css({
'transition-delay' : s*(1+index) + 's'
});
});
So, the children will have the transition delays like 1*s, 2*s, 3*s ..... and so on. Now to create the actual animation effect simply set the required transition and the children will be animated in a sequence. Works like a charm !
因此，孩子们将有过渡延迟，如 1*s、2*s、3*s ..... 等等。现在要创建实际的动画效果，只需设置所需的过渡，子项就会按顺序进行动画处理。奇迹般有效 ！
回答by Neolo
If you have a lot of items (for example: I have paginated table with >1000 items and wanna each row to be animated with delay when page is loads), you can use jQuery to solve this and avoid css file rising in size. Animation delay dynamically increases.
如果您有很多项目（例如：我有超过 1000 个项目的分页表，并且希望在加载页面时对每一行进行延迟动画），您可以使用 jQuery 来解决这个问题并避免 css 文件的大小增加。动画延迟动态增加。
$.each($('.myClass'), function(i, el){
$(el).css({'opacity':0});
setTimeout(function(){
$(el).animate({
'opacity':1.0
}, 450);
},500 + ( i * 500 ));
});?
EDIT:Here is the same code I adjusted to use with animate.css (install additional plugin before use https://gist.github.com/1438179)
编辑：这是我调整后与 animate.css 一起使用的相同代码（在使用https://gist.github.com/1438179之前安装其他插件）
$.each($(".myClass"), function(i, el){
$(el).css("opacity","0");
setTimeout(function(){
$(el).animateCSS("fadeIn","400");
},500 + ( i * 500 ));
});
Where "fadeIn" is animation type, "400" - animation execute time, 500 - delay for each element on page to be animated.
其中“fadeIn”是动画类型，“400” - 动画执行时间，500 - 页面上每个要动画的元素的延迟。
回答by peduarte
Like this:
像这样：
.myClass img {
-webkit-animation: myAnimation 0.9s linear forwards;
}
.myClass img:nth-child(1){
-webkit-animation-delay: 0.1s;
}
.myClass img:nth-child(2){
-webkit-animation-delay: 0.2s;
}
[...etc...]
