CSS3 animation属性介绍

CSS3 animation动画：CSS3除了transition属性，还可以使用animation功能实现复杂的动画效果。要创建animation动画，先要了解@keyframes规则。

CSS3 @keyframes关键帧：使用@keyframes创建动画。在动画过程中，可以多次改变CSS的样式，指定变化时用%，或者用关键字"form"和"to",表示0%到100%。

animation语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

 

• animation-name：规定@keyframes动画的名称；

• animation-duration：规定完成过渡效果需要多少秒或毫秒；

• animation-timing-function：规定速度效果的速度曲线；

• animation-delay：定义过渡效果何何时开始；

• animation-iteration-count：规定动画被播放的次数；

• animation-direction：规定动画是否在一下周期逆向播放；

• animation-play-state：规定动画是否正在运行或暂停；

• initial：设置属性为其默认值；（IE不支持）

• inherit：从父元素继承属性；（IE不支持）

浏览器兼容性：

• Chrome和Safari拓展前缀：-webkit-CSS3属性：值

• IE9 以及更早版本不支持transition属性

animation-name：指定了一个名称@keyframes animation

• keyframename：指定要绑定到选择器的关键帧的名称

• none：指定没有动画，该属性可以用于覆盖任何动画

nanimation-duration：定义动画完成一个周期需要多少秒或毫秒

• time：指定动画播放完成花费的时间。默认值为0，以为这没有动画效果

animation-timing-function：定义过度动画的效果

• linear：以相同速度开始至结束的过渡效果

• ease：慢速开始，然后变快，然后慢速结束的过渡效果

• ease-in：慢速开始的过度效果

• ease-out：慢速结束的过渡效果

• ease-in-out：慢速开始和结束的过渡效果

• cubic-bezier：在cubic-bezier函数中定义自己的值。可能的值是0-1之间

• step-start：马上跳转到动画结束状态

• step-end：保持动画开始状态，直到动画执行时间结束，马上跳转到动画结束

animation-delay：定义动画什么时候开始，单位可以是秒（s）或毫秒（ms）

 

• time：可选，定义动画开始前等待的时间，默认值为0

animation-iteration-count：定义动画应该播放多少次

 

• n：一个数字，定义应该播放多少次动画

• infinite：指定动画应该播放无限次（永远）

animation-directions：定义是否循环交替方向播放动画

 

• normal：默认值。动画按正常播放。

• reverse：动画方向播放

• alternate：动画在奇数次（1.3.5）正向播放，在偶数次（2.4.6）反反播放

• alternate-reverse：动画在奇数次反向播放，在偶数次正向播放

• initial：设置该属性为他的默认值

 

@keyframes语法：

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

 

• animationname：必需，定义animation的名称

• keyframes-selector：必需。动画持续时间的百分比

• css-style：必需。一个或多个合法的CSS样式属性