CSS3 动画

使元素从一种样式逐渐变化为另一种样式的效果

兼容性

IE10、FireFox16+ Chrome43+ Safari9+ OPera30+ Android(-webkit-)

animation

animation-name属相检索或设置所应用的动画名称

语法

animation-name:keyframename|none

参数说明

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

none:指定有没有动画

animation-duration属性检索或设置对象动画的持续时间

语法

animation-duration:time

参数说明

time指定动画播放完成花费的时间。默认是0 意味着没有动画效果

animation-timing-function 检索或设置动画的过渡类型

animation-delay属性检索或设置动画的延迟时间

语法

animation-delay:time

参数说明

可选。定义动画开始前等待的时间，以秒或毫秒计，默认是0

animation-iteration-count属性检索或设置对象动画的循环次数

语法

animation-iteration-count:infinite|<number>

参数说明

<number>为数字，默认是1 infinite为无限次循环

animation-direction属性检索或设置对象动画在循环中是否反向运动

语法

animation-direction:normal|reverse|alternate|alternate-reverse|initial|inhert

参数说明

• normal  正常方向
• reverse  反向运行
• alternate   动画先正常运行在反向运行，并持续交替运行
• alternate-reverse 动画先反方向在正方向运行，并持续交替运行

animation-fill-mode属性

规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素样式

语法

animation-fill-mode:none|forwards|backwards|both|initial|inherit

参数说明

• none  默认值 不设置对象动画之外的状态
• forwards  设置对象状态为动画介绍的状态
• backwards 设置对象状态为动画开始的状态
• both  设置对象状态为动画结束或开始的状态

animation-play-state属性指定动画是否运行或已暂停

语法

animation-play-state:paused|running

参数说明

• paused  指定暂停动画
• running  默认值，指定正在运行动画

keyframes 关键帧

指定任何顺序排列来决定Animation动画变化的关键位置

使用说明

使用@keyframes规则创建动画，通过逐渐改变一个css样式设定到另一个。在动画过程中可以通过@keyframes规则多次更改css样式的设定

语法

@keyframes animationname{

keyframes-selector{

css-styles;

}

}

参数说明

• animationname  必写项，定义animation名称
• keyframes-selector  必写项，动画持续时间百分比 
• css-styles  必写项，一个或多个合法的css样式属性

CSS3学习手记（11） 动画