动画延迟效果css,每个子元素都有延迟的CSS动画

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

}

等等...所以基本上，我希望每个孩子都有一个动画开始，但要有一个延迟。感谢您的输入！

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

6个解决方案

52 votes

您想要的是动画延迟属性。