动画

1.css3-过渡

transition 过渡属性

过渡：css从一种状态变化到另一种状态的过程

transition-property 设置哪些属性，需要过渡效果，可以传多个过渡的属性，使用逗号隔开

例如： transition-property: background-color,width，属性值设置为all，表示过渡全部属性

transition-duration 设置过渡的时间，就是完成整个效果，需要花费的时间，单位可以是秒(s)或者毫秒(ms)

transition-delay 设置过渡之前的等待时间，单位同transition-duration

transition-timing-function 设置过渡的动作函数：

默认值是 ease 表示先快速再慢速

linear 表示匀速

ease-in 表示加速

ease-out 表示减速

ease-in-out 表示先加速再减速

transition是过渡的缩写属性，四个属性值的顺序没有要求，但是如果设置了两个时间，第一个是过渡时间，第二个过渡等待时间

2.css3-动画

animation-name 指定动画的名称（指定一个动画的关键帧名称，就是动画的规则）

animation-duration 指定动画的时间（完成该动画需要多少时间）

animation-delay 动画的延迟播放时间

animation-timing-function 动画的动作函数，ease linear ease-in ease-out ease-in-out

animation-iteration-count 设置动画的播放次数 属性值可以给具体的次数，如果设置属性值为infinite，表示无限次数

animation-play-state 表示播放状态，默认值是running(播放) paused(暂停)

animation-direction 表示动画的方向，属性值包括：

normal(正向) reverse(反向) alternate(正反方向重复运动) alternate-reverse(反正方向重复运动)

animation-fill-mode 表示填充模式，其实就是动画结束后，元素的回到什么位置，属性值包括：

backwards(回到原点位置)，在开始动画之前，等待的时间在开始动画处等待，

forwards(停在结束位置)，在开始动画之前，等待的时间在原点位置处等待，

both(综合了上面两个属性的特点)，在开始动画处等待，在动画结束处停止，

animation是缩写属性，具体的属性值，没有顺序要求，如果同时设置动画时间和等待时间，第一个是动画时间，第二个是等待时间

3.关键帧

定义动画的关键帧，关键帧就是动画的规则，在css中，一个动画最多可以拆分成100份

@keyframesmove{/* from 是动画的起始位置 */from{left:0;}/* to  是动画的结束位置*/to{left:500px}}

定义动画的关键帧，将动画的规则，拆分成多组

@keyframesmove2{0%{left:100px;top:0;}25%{left:500px;top:0;}50%{left:500px;top:500px}75%{left:0;top:500px;}100%{left:0;top:100px;}}