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

等等... 所以基本上，我想为每个 child 制作一个动画，但有延迟。 感谢您的任何输入!

补充:也许我没有正确解释我的担忧:无论我有多少 child ，如何做到这一点。如何做到这一点而不必写下每个 child 的属性......例如，当我不知道会有多少 child 时。

Answer 1

这是使用 for 循环执行此操作的 scss 方法。

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