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：

＆＃13;

@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;
  }

＆＃13;

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

＆＃13;

关键帧动画边框底部颜色

1 个答案: