前端缓动画为什么不能有小数_CSS3 之动画及兼容性调优

由于CSS3动画对低版本的浏览器的支持效果并不是很好，特别是IE9及以下版本，更是无法支持。 所以有时候一些简单的动画效果，还只是用js代码来实现，但是效率偏低，而且效果有些偏生硬，不够顺滑。 毕竟用js代码来实现动画并非正确之道。

虽说css实现动画效果看起来更顺滑一些，但是也只是相对而言，因为css3动画的也是一帧一帧的执行，由于多种因素的影响，细看之下也未必是真的顺滑，所以只要把动画设计让眼睛感觉到是顺滑的就能达到完美的效果。

在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称

语法(@keyframes)：

@keyframes animationname {keyframes-selector {css-styles;}}

值

描述

animationname

必需，定义动画的名称

keyframes-selector

必需，动画运行过程中的百分比

在css3中，我们以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。其中，0% 是动画的开始时间，100% 动画的结束时间。

百分比分可以分解成无限多个，分解的越多，轨迹越复杂，达到的效果越好，这个需要在设计的时候细细琢磨

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

from {background: red;}

to {background: yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background: red;}

to {bac