Css 动画关键帧不褪色？

是否可以将0%-50%的转换从

红色

正常转换为

绿色

，然后在没有转换的情况下立即显示

蓝色

？因此，在上面的示例中，一旦完成50%，它立即变为蓝色（即不会从绿色变为蓝色），直到完成100%。

看看这是否有效，好吗

.顶{
宽度：100px；
高度：100px；
背景：红色；
动画：测试5s；
}
@关键帧测试{
0%{背景：红色；}
50%{背景：绿色；}
50.01%{背景：蓝色；}
100%{背景：蓝色；}
}

蓝色需要在不从绿色褪色的情况下出现。1%的解决方案是一个很好的解决方案，但仍然需要一种在没有最小延迟的情况下立即变为蓝色的方法。请再试一次。我投票认为这是一个很好的实用解决方案。但我想知道是否还有一种技术方法。

@keyframes test {

   0% { color: red;   } /* Starts red */
  50% { color: green; } /* Fades to green from red */
 100% { color: blue;  } /* Instant blue? Is no fading from green possible? */

}

<div class="top"></div>

.top {
  width: 100px;
  height: 100px;
  background: red;
  animation: test 5s;
}

@keyframes test {
  0%   { background:red; }
  50%  { background:green; }
  50.01%  { background:blue; }
  100%  { background:blue; }
}