CSS3动画
一、CSS3 动画（adimation）
1、动画（adimation）
-anima—灵魂，animate—赋予生命
-动画可以定义为使用绘画的手法，创造生命运动的艺术。
2、视觉暂留原理
人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。
3、动画原理
通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没有消失前播放下一幅画，就会给人造成一种流畅的视觉变化效果。
二、兼容性
IE10+、FireFox16+、Chrome43+、Safari9+、Opera30+、Android(-webkit-)
安卓手机设备的浏览器在使用CSS3动画时，要加上webkit前缀
三、animation属性
1、animation-name属性
检索或设置对象所应用的动画名称。
语法：
animation-name:keyframename|none;
参数说明
keyframename:指定要绑定到选择器饿关键帧的名称；
none:指定没有动画（可用于覆盖从级联的动画）。
2、animation-duration属性
检索或设置对象动画的持续时间。
语法
animation-duration:time;
参数说明
time指定动画播放完成花费的时间。默认是0，意味着没有动画效果。
3、animation-timing-function属性
检索或设置对象动画的过渡类型。
语法
animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out|step-start | step-end|steps(<integer>[,[star | end]] ?) | cubic-bezier(<number>,<number>,<number>,<number>);
参数说明
linear:线性过渡。（整个过程匀速运动）。
ease:平滑过渡。（结束比较生硬）。
ease-in:由慢到快。（结束比较生硬）。
ease-out:由快到慢。
ease-in-out:由慢到快再到慢。
step-start:等同于steps(1,start)
step-end:等同于steps(1,end)
steps(<integer>[,[start | end]] ?):两个接受参数的步进函数。
第一个参数：必须为正整数，指定函数
第二个参数：取值可是start或end，指定每一步的值发生变化的时间点
第二个参数：可选，默认值为end
4、animation-delay属性
检索或设置对象动画的延迟时间。
语法
animation-delay:time;
参数说明
可选。定义动画开始前等待的时间，以秒或毫秒计。默认为0。
5、animation-iteration-count属性
检索或设置对象动画的循环次数。
语法
animation-iteration-count:infinite|<number>;
参数说明
<number>为数字，其默认值为“1”；infinite为无限次数循环。
6、animation-direction属性
检索或设置对象动画在循环中是否反向运动。
语法：
animattion-direction:normal | reverse | alternate | alternate-reverse | initial |inherit ;
参数说明
normal：正常方向；
reverse：反方向运行；
alternate：动画先正常运行再反向运行，并持续交替运行；（前提有循环）
alternate-reverse：动画先反向运行再正方向运行，并持续交替运行；（前提有循环）
initial
inherit
7、animation-fill-mode属性
规定当动画不播放时（当动画完成或动画有延迟未开播时），要应用到元素的样式。
语法：
animation-fill-mode:none | forwards | backwards | both |initial | inherit;
参数说明：
none:默认值。不设置对象动画之外的状态；
forwards:设置对象状态为动画结束时的状态；
backwards:设置对象状态为动画开始时的状态；
both: 设置对象状态为动画结束或开始的状态
8、animation-play-state属性
指定动画是否正在进行或已暂停。
语法：
animation-[lay-state:paused | running;
参数说明
paused:指定暂停动画
running:默认值，指定正在运行的动画。
四、animation简写
1、animation属性
复合属性。检索或设置对象所应用的动画特效。
2、语法
animation:name duration timing-function delay iteration-count direction fill-mode play-state;
五、关键帧 @keyframes
1、keyframes定义
关键帧，可以定义任何顺序排列来决定Animation动画变化的关键位置。
2、使用说明
使用@keyframes规则创建动画，通过逐步改变一个css样式设定到另一个。在动画过程中可以通过@keyframes规则多次更改css样式的设定。
3、语法
@keyframes animationname{
keyframes-selector{
css-styles;
}
}
参数说明：
animationname:必写项，定义animation的名称。
keyframes-selector:必写项，动画持续时间的百分比，0-100%、from(0%)、to(100%)。
css-styles:必写项，一个或多个合法的CSS样式属性。
