title: How to make a slot machine text effect in css and/or javascript?
body: <p>I have a banner that I created that I want to animate with a lot machine effect: <a href="http://codepen.io/abek/pen/rLAmwr" rel="nofollow">http://codepen.io/abek/pen/rLAmwr</a></p>
  
  <p>What JS tools or CSS techniques would help create that effect? </p>
  
  <pre><code>  &lt;div class="select-a-game "&gt;
      &lt;ul class="select-a-game-name text-center"&gt;
        &lt;li class="sagn-dark-blue"&gt;S&lt;/li&gt;
        &lt;li class="sagn-dark-grey"&gt;E&lt;/li&gt;
        &lt;li class="sagn-orange"&gt;L&lt;/li&gt;
        &lt;li class="sagn-red"&gt;E&lt;/li&gt;
        &lt;li class="sagn-grey"&gt;C&lt;/li&gt;
        &lt;li class="sagn-dark-blue"&gt;T&lt;/li&gt;
        &lt;li class="sagn-black"&gt;A&lt;/li&gt;
        &lt;li class="sagn-dark-grey"&gt;G&lt;/li&gt;
        &lt;li class="sagn-dark-blue"&gt;A&lt;/li&gt;
        &lt;li class="sagn-grey"&gt;M&lt;/li&gt;
        &lt;li class="sagn-red"&gt;E&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>