<' animation-name '>：对象的动画名称
<' animation-duration '>：对象动画的持续时间
<' animation-timing-function '>：对象动画的过渡类型
<' animation-delay '>：对象动画延迟的时间
<' animation-iteration-count '>：对象动画的循环次数
<' animation-direction '>：对象动画在循环中是否反向运动
<' animation-fill-mode '>：对象动画时间之外的状态
<' animation-play-state '>：对象动画的状态。

[1] animation-name

检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

[2] animation-timing-function

linear：线性过渡。
ease：平滑过渡。
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
step-start：等同于 steps(1, start) （数字表示每一份显示画面具体再分几份）
step-end：等同于 steps(1, end)

[3] animation-iteration-count

infinite: 无限循环
<number>: 指定对象动画的具体循环次数

[4] animation-direction

normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

[5] animation-fill-mode

即动画完成时，是显示动画开始的状态还是结束时的状态。

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

[6] animation-play-state（hover适用）

running：运动
paused：暂停

transform和animation的区别

（1）transform仅描述元素的静态样式，常常配合transition和animation使用

（2）transition通常和hover等事件配合使用，animation是自发的，立即播放

（3）animation可设置循环次数

（4）animation可设置每一帧的样式和时间，transition只能设置头尾

（5）transition可与js配合使用，js设定要变化的样式，transition负责动画效果