animation属性的存在，让我们可以很方便的创建动画，但由于属性较多，所以使用时有点乱，所以在此综合整理一下，以便后续使用。
一、animation的属性（以下书写的顺序便是简写时的书写顺序，注意第八个属性，这个属性是不可以简写的）
1、animation-name：动画的名称
2、animation-duration：动画的持续时间
3、animation-timing-function：动画的速度曲线
4、animation-delay：动画的延迟执行时间
5、animation-iteration-count：动画执行次数
6、animation-direction：动画执行的方向
7、animation-fill-mode：规定动画时间之外的状态
8、animation-play-state：设置动画执行或暂停（不可简写）
二、animation属性的具体解析
1、animation-name：动画的名称
即@keyframes 动画的名称
2、animation-duration：动画的持续时间
动画完成一个周期所花费的秒或毫秒。默认是 0。
3、animation-timing-function：动画的速度曲线
默认值为ease
linear：动画从头到尾速度相同
ease：动画以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束
cubic-bezier（x1,y1,x2,y2）：贝塞尔函数，用于自定义速度曲线
关于贝塞尔曲线，推荐去看这篇文章，图解的很不错
https://www.jianshu.com/p/d999f090d333
4、animation-delay：动画的延迟执行时间
设置动画何时开始，默认值为0，也就是立即执行
5、animation-iteration-count：动画执行次数
动画被播放的次数，默认值为1
6、animation-direction：动画执行的方向
normal：动画正常播放，到达终点后，若设置为执行多次，则立即跳至起点，开始下一次动画
alternate：动画轮流反向播放，即到达终点后，若设置为执行多次，则从终点反向运动至起点
reverse：反向运行动画，从100%到0%
alternate-reverse：动画轮流反向播放，只不过第一次从100%开始
7、animation-fill-mode：规定动画时间之外的状态
将动画过程分为初始状态(即非keyframes内设置的样式)、等待时期（delay设置的时间内）、执行、完成时期
none：不改变默认行为
forwards:表示等待期保持初始样式，完成期间保持最后一帧样式。
backwards ：表示等待期为第一帧样式，完成期跳转为初始样式
both：表示等待期样式为第一帧样式，完成期保持最后一帧样式
8、animation-play-state：设置动画执行或暂停（不可简写）
paused：动画暂停
running：动画正在播放