CSS3中的animation动画属性简介
在CSS3中，有一个新的属性可以用来做一些简单的动画效果，这就是animation，中文意思就是动画。
一、首先我们来看看animation属性的兼容性（来源caniuse）
animation属性兼容
二、animation使用的简单例子
在这个例子中，我让一个从左移动到右，再移动回左边：
代码如下：
div移动
三、讲讲@keyframes动画的创建
-
介绍
在使用animation为元素制作动画时，先要制定想要的动画效果，例如让div元素移动，又或者改变它的背景色，实现翻转效果等，这时候就要用到@keyframes为其创建动画的效果； -
@keyframes的写法
总的格式如下：@keyframes 动画的名字{
这里制定元素变化的效果
} -
@keyframes的几个关键词
1.from和to，标记元素的起始状态和结束状态，例如下面例子，元素的起始背景色是红色，使其慢慢变成蓝色就可以这样写；
from和to
2.此外，状态变化也可以用百分比进行标识，添加动画在每个进度时的效果；
百分比表示动画效果进度
PS：在 @keyframes中填写动画效果，结束是不能添加分号;的，否则没有效果，下面这个是错误的写法：
错误写法
这里介绍animation的七大属性
一、animation-duration属性（持续时间）
-
介绍
animation-duration是为动画制定持续的时间，一般以秒或者毫秒来计算，如果不填写该属性，则默认为0，没有动画效果； -
写法：
二、animation-timing-function属性（时间曲线）
-
介绍
animation-timing-function属性是为动画制定从开始到结束时的播放速度曲线，比如由快到慢，或者由慢到快等； -
animation-timing-function的几个值
1.linear：表示动画一直以匀速进行播放；贝赛尔函数cubic-bezier(0,0,0.25,1)
2.ease：默认值，表示动画先慢后快，在即将结束时再变慢；cubic-bezier(0.25,0.1,0.25,1)
3.ease-in：动画由慢到快直至结束；cubic-bezier(0.42,0,1,1)
4.ease-out：动画由快到慢直至结束；cubic-bezier(0,0,0.58,1)
5.ease-in-out：动画由慢到快再到慢直至结束，与ease不同的是它均等得分为三份，而ease是只在结束时变慢；cubic-bezier(0.42,0,0.58,1)
6.标注时间：也可以直接标注一个时间(以s做单位)来规定动画全称以该速度进行播放；
7.贝赛尔函数：也可以使用贝赛尔函数来对动画的播放时间曲线进行规定；
关于贝赛尔函数点这里
这里是五个不同动画之间的效果对比：
效果对比 -
animation-timing-function写法
animation-timing-function
三、animation-delay属性（动画延迟时间）
-
介绍
delay顾名思义是延迟的意思，该属性作用就是规定动画延迟多少时间进行播放的，以秒或者毫秒做单位，默认值为0，可以设置负数，设置负数时候，动画直接跳过负数时间段进行执行，例如：动画只有5s，设置该属性的值为-2s的时候，动画是直接从第三秒的位置开始的； -
animation-delay负值与正值的对比
实验地址 -
animation-delay写法
animation-delay写法
四、animation-iteration-count属性（动画播放次数）
-
介绍
iteration-count这个连接词中，iteration的意思是反复，count的意思是次数。该属性制定动画的播放次数，默认是1，也就是播放一次，填写数字几就是播放几次，此外，还有值infinite是无限循环的意思； -
animation-iteration-count写法
动画播放次数
五、animation-direction属性（动画反向播放）
-
介绍
该属性中，direction是方向的意思，该属性制定动画是否反方向播放，以及怎么样进行播放； -
animation-direction的四个值
1.normal：默认值，不进行反方向播放；
2.reverse：全部播放都是用反方向播放；
3.alternate：在奇数次数（1、3、5）的时候正向播放，偶数次数（2、4、6）进行反向播放；
4.alternate-reverse：在偶数次数（1、3、5）的时候正向播放，奇数次数（2、4、6）进行反向播放；
-
animation-direction的写法
animation-direction写法
六、animation-fill-mode属性（动画保持开始或者结束时的样式）
-
介绍
animation-fill-mode属性制定动画是否保持开始时的样式，或者是结束时的样式，又或者两者皆有，比如在一次播放结束后，动画保持什么样的样式； -
animation-fill-mode属性的三个值
1.forwards：动画结束后保持结束时的样式；
2.backwards：动画结束后保持开始时的样式；
3.both：两者皆有；
七、animation-play-state属性（暂停动画）
-
介绍
animation-play-state属性制定动画的运行状态，是运行还是暂停； -
animation-play-state属性的两个值
1.paused：动画暂停；
2.running：动画运行； -
例子：点击按钮暂停动画或开始动画
暂停或运行动画
最后说说animation的简写形式
格式如下：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation属性简写
