title: How to remove glitchy color transitions?
body: <p>I am in the process of designing an animated menu. I tried to get the text in the boxes to change color and they do so, but it's rather glitchy. The text flashes after the transition, and when you hover over it. Here's the <a href="https://jsfiddle.net/Imagifight/1g91baxu/" rel="nofollow">JsFiddle</a> with the glitch.
  I also noticed it works fine without the hover transition, except of course the text doesn't change color. Here's that one: <a href="https://jsfiddle.net/Imagifight/mgsc3gpn/" rel="nofollow">Less glitchy one</a>.</p>
  
  <p>Please suggest a fix.</p>
  
  <p>Glitchy code [I removed webkit]</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS */
  @keyframes box {
    0% {
      left: 0px;
      width: 30px;
    }
    50% {
      left: 30px;
      width: 0px;
    }
    100% {
      left: 30px;
      width: 70px;
      color: #FFF;
    }
  }
  h1 {
    position: relative;
    left: 30px;
    color: cyan;
    font-family: 'Agency FB';
  }
  div {
    position: relative;
    height: 30px;
    width: 0px;
    left: 0px;
    background-color: cyan;
    color: transparent;
    animation: box 1.0s forwards;
    transition: all 0.5s ease;
  }
   div:hover {
    background-color: #FFF;
    border: 1px solid cyan;
  }
  div:hover label {
    color: cyan;
  }
  label {
    position: absolute;
    left: 5px;
    font-family: 'Agency FB';
    transition: all 0.5s ease;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- HTML --&gt;
  &lt;h1&gt;
  Test
  &lt;/h1&gt;
  &lt;div id="1"&gt;
    &lt;label&gt;Hello&lt;/label&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div id="1"&gt;
    &lt;label&gt;World&lt;/label&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div id="1"&gt;
    &lt;label&gt;Foobar&lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>