CSS3学习手记（11） 动画
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样式属性
