每个子元素都有延迟的 CSS 动画 [英] CSS Animations with delay for each child element

问题描述

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

I am trying to create a cascading effect by applying an animation to each child element. I was wondering if there is a better way to do it than this:

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

等等...所以基本上，我想为每个孩子开始一个动画，但有延迟.感谢您的任何意见！

and so on... So basically, I'd like to have an animation starting for each child but with a delay. Thanks for any input!

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

Addition: Maybe I did not properly explain what was my concern: It's about how to do this no matter how many children I have. How to do this without having to write down the properties for every child... for example, when I don't know how many children there are going to be.

推荐答案

这是使用 for 循环的 scss 方法.

Here's a scss way to do it using a for loop.

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

这篇关于每个子元素都有延迟的 CSS 动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！