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

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

}

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