title: Stagger CSS3 Animation Timing
body: <p>I have a lot of <code>.line</code>s and I am applying a fading animation to them. I am wondering if there is a simple way to somehow stagger the animation timing so each one is triggered one after another (as oppose to all at once). In other words, I want to create an effect where the first <code>.line</code> would begin fading, then a second later the second <code>.line</code> would fade, then a second later the third <code>.line</code> would fade. This only needs to work in Chrome.</p>
  
  <pre><code>div.line { width: 300px; height:5px; background:red;
             -webkit-animation: fade 20s infinite;
             -webkit-animation-timing-function: linear;
  }
  
  @-webkit-keyframes fade {
      0%   { opacity:1.0; }
      50%  { opacity:0.0; }
      100% { opacity:1.0; }
  }
  
  
  &lt;div class="line"&gt;&lt;/div&gt;
  &lt;div class="line"&gt;&lt;/div&gt;
  ...
  &lt;div class="line"&gt;&lt;/div&gt;
  </code></pre>