title: CSS hover slide out flashes text too early
body: <p>I have created a list of glyphicons, and when you hover over each glyphicon it displays expanding text.</p>
  
  <p>The issue I am facing is that if the text is long it will flash over the glyphicon's container before the css transition has happened.</p>
  
  <p><a href="https://jsfiddle.net/maxshuty/xme7k0v1/8/" rel="nofollow noreferrer">Here is a fiddle example (notice the second box on hover).</a></p>
  
  <p>I have tried playing around with the transitions and getting the text to display after the transition has finished. </p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="myContainer"&gt;
    &lt;div id="myNav"&gt;
      &lt;ul class="subMenu"&gt;
        &lt;li class="listItem"&gt;&lt;a href="#"&gt;List Item 1&lt;/a&gt;&lt;/li&gt;
        &lt;li class="listItem"&gt;&lt;a href="#"&gt;List Item 2 with long text&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.subMenu .listItem {
    clear:both;
    list-style: none;
    height:15px;
    width: 15px;
    color: transparent;
    cursor: pointer;
    float: right;
    background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 10px center;
    border: solid 1px #ccc;
    padding: 9px 12px 9px 10px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
  }
  
  
  .subMenu .listItem:hover {
    width: 100%;
    color: #000;
    cursor: auto;
    background: #fff
  }
  
  
  .subMenu .listItem a {
    color: transparent;
  }
  
  .subMenu .listItem:hover a{
    color: #000;
  }
  </code></pre>