CSS3动画

一、动画的基本使用

二、动画的常用属性（其它）

三、动画的简写属性

四、速度曲线

动画可以设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果；相比较过渡，动画可以实现更多变化、更多控制、连续自动播放等效果。

动画的基本使用：

分两步：1、先定义动画

               2、再使用（调用）动画

1、用keyframes定义动画（类似定义类选择器）

0%为起始状态，100%为结束状态。也可以分别换为from to

2、元素使用动画

语法：animation-name：定义的动画名称

时序时间：animation-duration：几秒（默认是0s）

3、动画序列可以做多个状态的变化（0%、25%、50%、75%、100%）

里面的百分比就是总时间的划分 ：乘以总时间即为每一步的时间

动画的常用属性

属性animation-

值：timing-function（规定动画的速度曲线，默认ease）

      delay（何时开始，默认是0）

      fill-mode（动画结束后的状态，默认是backwards，回到起始状态；forwards，停留在结束状态）

      iteration-count（规定播放次数，默认为1，infinite为无限次）

      direction（是否在下一周期逆向播放，默认是normal，不逆向；alternate逆向播放）

      play-state（是否正在运行或暂停，默认是running，还有paused）

动画的简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向播放 动画起始或者结束状态（尽量按顺序写，若有没写，一律按默认值）

（注：简写属性不包含play-state，要单独写）

速度曲线

linear（动画完全匀速）

ease（默认，动画以低速开始，然后加快，在结束前变慢）

ease-in（动画以低速开始）

ease-out（动画以低速结束）

ease-in-out（动画以低速开始和结束）

steps（）（括号里面写数字，是几就分几步，来完成动画）

（注：若写多个动画，之间用逗号隔开）