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.

推荐答案

您需要的是动画延迟属性。看看使用下面的code本的jsfiddle 以一个简单的例子：

What you want is the animation delay property. Take a look at this jsFiddle for a simple example using the code below:

@-webkit-keyframes FadeIn { 
  0% { opacity:0; -webkit-transform:scale(.1);}
  85% {opacity:1; -webkit-transform:scale(1.05);}
  100% {-webkit-transform:scale(1); }
}

.myClass img { float: left; margin: 20px; -webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass img:nth-child(1){ -webkit-animation-delay: .5s }
.myClass img:nth-child(2){ -webkit-animation-delay: 1s }
.myClass img:nth-child(3){ -webkit-animation-delay: 1.5s }
.myClass img:nth-child(4){ -webkit-animation-delay: 2s }

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