是否可以在没有转换的情况下创建css动画?
问题描述:
如果我有以下几点:是否可以在没有转换的情况下创建css动画?
@keyframes play {
0% {background:red;}
25% {background:green;}
45% {background:blue;}
55% {background:orange;}
75% {background:black;}
100% {background:white;}
}
是否有可能在一个“独立”的方式这个动画应用于元素但颜色之间的转换?例如,通过动画的25%,我希望元素突然从红色变为绿色。我尝试使用步骤(6)参数没有运气。
如果没有,是否有替代方案来做我想要的?
谢谢!
答
不需要TRICKS
这样做的正确的方式是通过transition-timing-function属性,定义的步骤之间的影响动画。
值之一是step-end
,即跳过的动画步骤,以最终结果,因此:
-webkit-animation: play 5s step-end;
animation: play 5s step-end;
答
你可以用一个简单的技巧来做到这一点。
@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。
答
@keyframes play {
0% {background:red;}
24% {background:red;}
25% {background:green;}
45% {background:blue;}
55% {background:orange;}
75% {background:black;}
100% {background:white;}
}
这可能做的伎俩
可以为24%的背景关键帧:红色,然后25%背景:绿色? – GifCo 2014-08-28 15:10:45