如何删除毛刺的颜色过渡

Question

我正在设计一个动画菜单。我试图让框中的文本改变颜色，他们这样做了，但它相当小故障。文本在过渡后闪烁，当您将鼠标悬停在其上时。这是带有故障的 JsFiddle。我还注意到它在没有悬停过渡的情况下工作正常，当然除了文本不会改变颜色。这是那个：不那么小的故障。

请提出修复建议。

故障代码 [我删除了网络套件]

/* 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 -->
<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>

Answer 1

我可以看到故障，但可能是因为这个：

transition: all 0.5s ease;

也许您在父文本中有其他颜色，如果您只想在背景颜色上使用过渡它只在那里

transition: background-color 0.5s ease;

并且为了避免高度的变化，您可以使用它

 box-sizing: border-box;

Answer 2

我不知道

你所说的"故障"到底是什么意思。首先，我会改变：

border: 1px solid cyan;

自：

outline: 1px solid cyan;

当悬停工作时，边框使这个div移动了一点。