CSS Animations with delay for each child element

Question

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.

Answer 1

What you want is the animation delay property.

@keyframes FadeIn { 
  0% {
    opacity: 0;
    transform: scale(.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.myClass img {
  float: left;
  margin: 20px;
  animation: FadeIn 1s linear;
  animation-fill-mode: both;
}

.myClass img:nth-child(1) { animation-delay: .5s }
.myClass img:nth-child(2) { animation-delay: 1s }
.myClass img:nth-child(3) { animation-delay: 1.5s }
.myClass img:nth-child(4) { animation-delay: 2s }

<div class="myClass">
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
</div>

A CSS preprocessor such as Less.js or Sass can reduce the amount of repetition, but if you're working with an unknown number of child elements or need to animate a large number then JavaScript will be the best option.