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

Question

如果我有以下几点：

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

是否有可能在一个“独立”的方式这个动画应用于元素但颜色之间的转换？例如，通过动画的25％，我希望元素突然从红色变为绿色。我尝试使用步骤（6）参数没有运气。

如果没有，是否有替代方案来做我想要的？

谢谢！

Answer 1

不需要TRICKS

这样做的正确的方式是通过transition-timing-function属性，定义的步骤之间的影响动画。

值之一是step-end，即跳过的动画步骤，以最终结果，因此：

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

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

Answer 2

你可以用一个简单的技巧来做到这一点。

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

因为我使用chrome，我将关键帧更改为webkit-keyframes。

http://jsfiddle.net/gfvyt9qc/2/

Answer 3

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

这可能做的伎俩