animation 动画分为两步
1、第一步：定义动画
第一种：@keyframes 动画名{
0%{}
50%
100%{}
}
第二种：@keyframes 动画名{
from{}
to{}
}
第二种只适合动画只有初始状态和结束状态
兼容：@-webkit-keyframes
2、第二步：触发动画（执行动画）
animation：动画的名字 动画执行完成的时间
动画的名字和动画执行的完成时间缺一不可
（1）name：动画名
（2）duration：持续时长
（3）timing-function 检索或设置对象动画的过渡类型
（i）linear：线性过渡
（ii）ease：平滑过渡
（iii）ease-in：由慢到快
（iiii）ease-out：由快到慢
（iiiii）ease-in-out：由慢到快再到慢
（iiiiii）step-start：马上跳到动画每一结束帧的状态
（4）delay：0s；检索或设置对象动画延迟的时间
（5）iteration-count：检索或是设置对象动画的循环次数
（i）infinite：无线循环
（ii）number：循环的次数
（6）direction：动画的方向
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
（7）fill-mode：动画停止之后的状态
none：默认值，动画执行后停止第一帧的位置
forwards：动画停止后内容显示最后一帧的位置
backwrads：同none
both：同forwards
（8）animation-play-state：检索或设置对象动画的状态
running：运动
paused：暂停
可以用来当鼠标经过时，动画停止，鼠标移开动画继续执行
原文：https://www.cnblogs.com/phantomyy/p/14958189.html