是否可以在没有过渡的情况下创建 css 动画？

Question

如果我有以下几点：

@keyframes play {
    0%   {background:red;}
    25%  {background:green;}
    45%  {background:blue;}
    55%  {background:orange;}
    75%  {background:black;}
    100% {background:white;}
}

是否可以以“离散”方式将此动画应用于元素而无需在颜色之间转换？例如，在动画的 25% 中，我希望元素突然从红色变为绿色。我尝试使用 steps(6) 参数但没有成功。

如果没有，有没有其他办法可以做我想做的事？

谢谢！

Answer 1

无需技巧

正确的做法是通过transition-timing-function属性，它定义了动画步骤之间的效果。

值之一是step-end，跳过动画步骤到最终结果，所以：

-webkit-animation: play 5s step-end;
animation: play 5s step-end;

http://jsfiddle.net/oe5nfy2L/1/