每个子元素都有延迟的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;
}

依此类推...因此，基本上，我希望每个孩子都有一个动画开始，但要有一个延迟。感谢您的输入！

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

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

@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>

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

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

@for $i from 1 through 10 {
    .myClass img:nth-child(#{$i}n) {
        animation-delay: #{$i * 0.5}s;
    }
}

在[希望不久]将来时attr和calc有充分支持，我们就可以做到这一点没有JavaScript。

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：

.something > li
{
    animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));
}

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

您还可以使用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 .....等。现在，要创建实际的动画效果，只需设置所需的过渡，然后将按顺序对子级进行动画处理。奇迹般有效 ！

如果您有很多项目（例如：我的分页表中有超过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”（延迟），用于动画页面上的每个元素。

像这样：

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