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 [JsFiddle](https://jsfiddle.net/Imagifight/1g91baxu/) 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: [Less glitchy one](https://jsfiddle.net/Imagifight/mgsc3gpn/).

Please suggest a fix.

Glitchy code [I removed webkit]

```css
/* 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;
}
```

```html
<!-- HTML -->
<h1>
Test
</h1>
<div id="1">
  <label>Hello</label>
</div>
<br>
<div id="1">
  <label>World</label>
</div>
<br>
<div id="1">
  <label>Foobar</label>
</div>
```