为什么CSS动画会产生渐变？

Question

为什么CSS动画会产生渐变？有什么方法可以消除渐变效果？如何在不运行代码的情况下知道它会产生什么样的渐变？

 0%,
100% {
    background-color: red
}
50% {
    background-color: yellow
}

Answer 1

background-color被视为animated property。要克服颜色的逐渐变化，您需要使用steps()。

.some-class {
  width: 200px;
  height: 200px;
  animation: anim 1s steps(2) infinite;
}

@keyframes anim {
  from { background-color: yellow; }
  to { background-color: red; }
}

<div class="some-class"></div>