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

Question

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

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

}

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

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

Answer 1

这是一种使用for循环的scss方法。@for $i from 1 through 10 {    .myClass img:nth-child(#{$i}n) {        animation-delay: #{$i * 0.5}s;    }}

Answer 2

在[希望不久]将来时attr和calc被完全支持，我们就可以做到这一点没有JavaScript。HTML：<ul class="something">&nbsp; &nbsp; <li data-animation-offset="1.0">asdf</li>&nbsp; &nbsp; <li data-animation-offset="1.3">asdf</li>&nbsp; &nbsp; <li data-animation-offset="1.1">asdf</li>&nbsp; &nbsp; <li data-animation-offset="1.2">asdf</li></ul>CSS：.something > li{&nbsp; &nbsp; animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));}这将产生一种效果，其中每个列表项都以看起来似乎是随机的顺序进行动画处理。