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

等等。。。 所以基本上，我希望每个孩子都有一个动画开始，但要有一个延迟。 谢谢你的意见

另外：也许我没有正确地解释我所关心的是什么：不管我有多少孩子，都是关于如何做到这一点。如何做到这一点，而不必写下每个孩子的属性。。。例如，当我不知道会有多少孩子的时候

像这样：

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

你想要的是财产

@keyframes FadeIn{
0% {
不透明度：0；
变换：缩放（.1）；
}
85% {
不透明度：1；
转换：标度（1.05）；
}
100% {
变换：比例（1）；
}
}
.myClass img{
浮动：左；
利润率：20px；
动画：FadeIn 1s线性；
动画填充模式：两者都有；
}
.myClass img:n个子（1）{动画延迟：.5s}
.myClass img:n子（2）{动画延迟：1s}
.myClass img:n个子（3）{动画延迟：1.5s}
.myClass img:n子（4）{动画延迟：2s}

---

如果您有很多项（例如：我用>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的相同代码（使用前安装其他插件）

---

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

在[希望不久的]将来，当

attr

和

calc

完全受支持时，我们将能够在不使用JavaScript的情况下实现这一点

HTML:

---

这将创建一种效果，其中每个列表项都以随机顺序设置动画。

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

---

所以，孩子们会有像1*s，2*s，3*s这样的过渡延迟。。。。。等等现在要创建实际的动画效果，只需设置所需的过渡，子对象将按顺序设置动画。工作起来很有魅力

这里有一个使用for循环的scss方法

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

---

使用一些js元素选择器（比如dojo.query或jquery）并在for循环中应用样式怎么样？这是我唯一想到的……是的，我想这是为每个孩子做这件事的唯一方法，而不必为每个孩子写下一节课。我认为可能会有一些新的CSS3属性使之成为可能，但我想我必须等待变量的引入。。。谢谢所以你想要一些CSS动画？类似于

-webkit动画增量
？这肯定有用，问得好。@Ed-M没错！我只是在看计数器增量属性，如果像这样的变量可以用于任何css属性定义，而不仅仅是“内容”属性定义，那就太好了……嗨，感谢简化：）我实际上更关心的是正在进行的级联，增加0.1秒的延迟，而不是简化类本身。但当然，这是一个更好的方式写下来，谢谢！哦，好吧，我的错。好的，你可以用Javascript来做，为每个循环做一个测试。但我不建议这样做……我认为这个答案违背了被问及的精神，即通过CSS动画与JavaScript/jQuery动画来实现的方法。TBH我期望类似于
。myClass li:nth child（n）{transition delay:calc（n*0.2s）；}
这将非常方便。我想说的是，我希望w3能够在未来实现第n个带变量的子函数，因此我们可以例如说，子函数（n）的过渡延迟是
0.5+（n*%1.5）
这不是一个奇妙的公式，但无论你可能添加多少个li，它看起来都是随机的。我的抱怨是，必须为每个列表项创建几个CSS选项，然后每当我得到一个比我的CSS所准备的列表大的列表时，就必须扩展它。在SCS和更少的列表上有随机函数，但在这个问题上有很多离题，所以我的沮丧无法用简单的CSS来解决。我的观点是：CSS应该覆盖所有的视觉效果，这就是它提出的目的，但有时我们无法帮助需要使用JS来实现我们想要的图形化结果。是的，这看起来是随机的，但是在运行了几次动画之后，你的眼睛会开始预测它，它不再是随机的。用户可能不会注意到。这就像电影中的小丑——很少有人注意到他们。不过，还是感觉到了伪随机性。@dreamster:旧提琴使用了
-webkit
前缀（Chrome仍然支持该前缀）。您需要添加非前缀版本（或使用类似autoprexfixer（）的东西）如果你想这样做。我认为性能方面这是这个页面上最好的解决方案，因为它仍然可以让动画本身完全通过css完成。此外，它还可以防止文件膨胀和不必要的难以辨认。做得好@Robshiring，但我最多不能做100个，它不能很好地工作。10次录制${I}后你能帮忙吗值是否应该从0（零）开始？
<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>

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

$(".myClass img").each(function(index){
     $(this).css({
          'transition-delay' : s*(1+index) + 's'
     });
 });

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