css - 关键帧动画边框底部颜色

Question

我已经阅读了解决关键帧的其他问题/答案(以及在线文章)，在我看来我的代码确实应该可以工作……但没有任何反应。我没有使用任何供应商前缀，因为从 caniuse 看来它们不再是必需的。`

@keyframe colorWash {
  from{border-bottom:25px solid #111;}
  50%{border-bottom: 25px solid #333;}
  to{border-bottom:25px solid #777;}
}

#bro {
  padding:2rem;
  background-color:#999;
  border-bottom: 25px solid #111;
  animation: colorWash 10s infinite;
}

Answer 1

除了一个小细节(在 CSS 中很重要)之外，您的动画效果很好:

• 不是@keyframe，而是@keyframes

现在，既然您指定它应该无限循环，我假设您希望它平滑。因此，您可能希望将 from 与 to 匹配(因此结束和开始之间的过渡是无缝的。我还缩短了持续时间，因此更容易观察。

还建议仅在 @keyframes 中指定要设置动画的属性。在您的情况下，border-bottom-color:

@keyframes colorWash {
  from {border-bottom-color: #111;}
  42%{border-bottom-color: #777;}
  to {border-bottom-color: #111;}
}

#bro {
  padding:2rem;
  background-color:#999;
  border-bottom: 25px solid;
  animation: colorWash 3s infinite;
  }

<div id="bro"></div>