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

为什么CSS动画会产生渐变？有没有办法消除梯度效应？如果不运行代码，你怎么知道它会产生什么梯度呢

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

---

背景色

被视为一种颜色。要克服颜色的渐变，需要使用

steps（）

。一些类{
宽度：200px；
高度：200px；
动画：动画1步（2）无限；
}
@关键帧动画{
来自{背景色：黄色；}
至{背景色：红色；}
}

---

你能再发一点这个片段吗？