title: CSS Animations with delay for each child element
body: <p>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:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>and so on...
  So basically, I'd like to have an animation starting for each child but with a delay. 
  Thanks for any input!</p>
  
  <p>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. </p>