是否可以在沒有轉換的情況下創建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;} 
} 

這可能做的伎倆