Question

如果我有以下内容：

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

是否可以将此动画应用于＆＃34;离散＆＃34;没有颜色之间转换的方式？例如，通过动画的25％，我希望元素突然从红色变为绿色。我尝试使用步骤（6）参数没有运气。

如果没有，是否可以选择做我想做的事情？

谢谢！

Answer 1

无需诀窍

正确的方法是通过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;}
}

这可以解决问题

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

3 个答案: