title: CSS3 animation delay using nth-child - Sass/Compass
body: <p>I'm looking to animate some panels without any JS. The effect I want to create is similar to this: <a href="http://www.sequence.co.uk/case-studies/" rel="nofollow">http://www.sequence.co.uk/case-studies/</a></p>
  
  <p>I've got the animation about right and I can see in fire-bug that each li has its own delay using nth-child BUT the staggered delay isn't working.</p>
  
  <p>See code below:</p>
  
  <p><a href="http://codepen.io/bakers37/pen/KwoNvB" rel="nofollow">http://codepen.io/bakers37/pen/KwoNvB</a></p>
  
  <pre><code>@-webkit-keyframes flip { 
   0% {
      -webkit-transform: rotateY(-180deg);
      transform: rotateY(-180deg);
      opacity: 0.5;
   }
   100% {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
      opacity: 1;
    }
  }
  
  @keyframes flip { 
   0% {
      transform: rotateY(-180deg);
      opacity: 0.5;
   }
   100% {
      transform: rotateY(0deg);
      opacity: 1;
   }
  }
  li
  {
      width: 200px;
      height: 200px;
      display: inline-block;
      background: #ccc;
      margin: 10px;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-animation-name: flip;
      animation-name: flip;
      -webkit-animation-duration: 3s;
      animation-duration: 3s;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
  
      // Loop through the items and add some delay.
    @for $i from 1 through 20 {
        &amp;:nth-child(#{$i}) { 
          @include transition-delay(1s * $i);
        }
     }
   }
  </code></pre>