title: Adding CSS animation with delay to each list item
body: <p>I'm trying to write some jquery that will go through a specified unordered list / dom element and assign a CSS (animation) class to each list item / child. I also want to make an adjustable delay time between the .addClass.</p>
  
  <p>Everything I've tried has failed miserably.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li&gt;Item 1&lt;/li&gt;
     &lt;li&gt;Item 2&lt;/li&gt;
     &lt;li&gt;Item 3&lt;/li&gt;
     &lt;li&gt;Item 4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Becomes:</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li class="animation"&gt;Item 1&lt;/li&gt;
       (50ms delay)
     &lt;li class="animation"&gt;Item 2&lt;/li&gt;
       (50ms delay)
     &lt;li class="animation"&gt;Item 3&lt;/li&gt;
       (50ms delay)
     &lt;li class="animation"&gt;Item 4&lt;/li&gt;
       (50ms delay)
  &lt;/ul&gt;
  </code></pre>
  
  <p>Any thoughts?</p>