每个子元素都有延迟的CSS动画

我试图通过将动画应用于每个子元素来创建级联效果。 我想知道是否有比这更好的方法：

.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;

}

等等...所以基本上，我希望每个孩子都有一个动画开始，但要有一个延迟。感谢您的输入！

另外：也许我没有正确解释我所关注的问题：这与我有多少孩子无关。 如何执行此操作而不必写下每个孩子的属性……例如，当我不知道会有多少个孩子时。

6个解决方案

52 votes

您想要的是动画延迟属性。

诸如Less.js或Sass之类的CSS预处理器可以减少重复的次数，但是如果您要使用未知数量的子元素或需要对大量子元素进行动画处理，那么JavaScript将是最佳选择。

CherryFlavourPez answered 2019-11-17T08:41:41Z

37 votes

这是一种使用for循环的scss方法。

@for $i from 1 through 10 {

.myClass img:nth-child(#{$i}n) {

animation-delay: #{$i * 0.5}s;

}

}

robshearing answered 2019-11-17T08:42:07Z

19 votes

在[希望不久的将来]完全支持attr和calc的情况下，我们将能够在不使用JavaScript的情况下完成此任务。

HTML：

• asdf
• asdf
• asdf
• asdf

CSS：

.something > li

{

animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));

}

这将产生一种效果，其中每个列表项都以看起来似乎是随机的顺序进行动画处理。

Steven Vachon answered 2019-11-17T08:42:43Z

17 votes

您还可以使用CSS中的transition-delay属性，并使用JS或JQuery为每个子元素分配不同的延迟。 (假设s是启动延迟，以秒为单位)

$(".myClass img").each(function(index){

$(this).css({

'transition-delay' : s*(1+index) + 's'

});

});

因此，孩子将具有过渡延迟，例如1 * s，2 * s，3 * s .....等等。 现在，要创建实际的动画效果，只需设置所需的过渡，然后将按顺序对子级进行动画处理。 奇迹般有效 ！

Adk96r answered 2019-11-17T08:43:14Z

8 votes

如果您有很多项目(例如：我的分页表中有超过1000个项目，并且希望在加载页面时对每行进行延迟动画处理)，则可以使用jQuery解决此问题并避免CSS文件的大小增加。 动画延迟会动态增加。

$.each($('.myClass'), function(i, el){

$(el).css({'opacity':0});

setTimeout(function(){

$(el).animate({

'opacity':1.0

}, 450);

},500 + ( i * 500 ));

});​

编辑：这是我调整为与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 ));

});

其中“ fadeIn”是动画类型，“ 400”-动画执行时间，“ 500-延迟”用于页面上要动画的每个元素。

Neolo answered 2019-11-17T08:43:53Z

0 votes

像这样：

.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...]

peduarte answered 2019-11-17T08:44:13Z