html - 为什么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>