title: Random opacity animation on list of elements
body: <p>I have looked everywhere and can't find the right way to do this, hopefully someone will be able to help here. </p>
  
  <p>Reference Image:
  <a href="http://theintegrateur.com/grid.jpg" rel="nofollow noreferrer">http://theintegrateur.com/grid.jpg</a></p>
  
  <p>What I want to do is an animation on the ".clients-overlay" span so that when the page loads a random element's overlay has the opacity of 0 for 4 seconds and then goes back to 0.7. Then the same animation happens to a random element in the list.</p>
  
  <pre><code>    &lt;ul id="clients-list" class="group"&gt;
          &lt;li&gt;
              &lt;span class="clients-overlay"&gt;&amp;nbsp;&lt;/span&gt;
              &lt;span&gt;&lt;img src="img/logo-client.jpg" alt="Client" title="Client" /&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;span class="clients-overlay"&gt;&amp;nbsp;&lt;/span&gt;
              &lt;span&gt;&lt;img src="img/logo-client.jpg" alt="Client" title="Client" /&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;span class="clients-overlay"&gt;&amp;nbsp;&lt;/span&gt;
              &lt;span&gt;&lt;img src="img/logo-client.jpg" alt="Client" title="Client" /&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;span class="clients-overlay"&gt;&amp;nbsp;&lt;/span&gt;
              &lt;span&gt;&lt;img src="img/logo-client.jpg" alt="Client" title="Client" /&gt;&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>