css - 是否可以在没有过渡的情况下创建 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/