css动画

概念
–使元素一种样式逐渐变化为另一种样式的效果
动画属性
1.animation-name属性：检索或设置对象所应用的动画名称。
语法：

animation-name: keyframename | none;
-----*****-----
keyframename :指定要绑定到选择器的关键帧的名称
none:指定有没有动画

2，animation-duration属性：检索或设置对象动画的持续时间。
语法：

animation-duration: time;
(time默认值为0)

3，animation-time-function属性：检索或设置对象动画的过渡类型。
语法：

animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end |
				    steps(<integer>[,[ start | 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([,[ start | end]?]): 接受两个参数的步进函数，第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(n,n,n,n): 自定义贝塞尔曲线的效果，其中的四个参数为从0到1的数字。

4，animation-iteration-count属性：检索或设置对象动画的循环次数。
语法：

animation-iteration-count: infinite | <number>;
------******-------
<number>为数字，默认值为“1”，infinite为无限次数循环。

5，animatin-direction属性：检索或设置对象动画在循环中是否反向运动。
语法

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

参数说明：
normal: 正常方向。
reverse； 反方向运动。
alternate: 动画先正常运行再反方向运行，并持续交替运行。
alternate-reverse：动画先反方向运行再正方向运行，并持续交替运行。

6，animation-fill-mode属性：
规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素的样式。
语法：

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

参数说明：
none:默认值。不设置对象动画之外的状态。
forwards :设置对象状态为动画结束时的状态。
backwards: 设置对象状态为动画开始时的状态。
both: 设置对象状态为动画结束或开始的状态。

7，animation-play-state属性：指定动画是否正在运行或已暂停。
语法

animation-play-state: paused | running;
------*******------
pause:指定动画暂停
running：默认值，指定正在运行的动画。

8，animation属性：复合属性，检索或设置对象所应用的动画特效。
语法

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