1、定义动画 第一种方法、@keyframes 动画名称 { /* 开始状态 */
from { }
/* 结束状态 */
to { }
}
第二种方法、@keyframes 动画名称 {
0% { }
25% { }
50% { }
. . . . .
100% { }
}
2、调用动画
animation：动画名称 执行时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
注意：（1）取值不分先后
（2）必须赋值项：动画名称和动画时间
（3）若出现两个时间，第一个为执行时间，第二个为延迟时间
3、动画的属性（了解）
animation-name 动画名称
animation-duration 持续时间
animation-timing-function：ease; 运动曲线 ，默认为ease，linear 匀速。steps(数字) 表示分几步走完
animation-delay：0s；延迟时间，默认为0s
animation-iteration-count；1; 重复次数 ，默认为1次，infinite 无限次
animation-direction：normal; 动画方向，是否反向播放 ，默认为normal，正常，alternate为反向播放
animation-fill-mode：backword; 默认是回到起始状态， forwards是停留在结束状态
animation-play-state：paused; 和 hover 搭用，鼠标经过，停止动画
4、逐帧动画
配合精灵图使用，动画速度曲线为 steps(N)，N为精灵图的个数
一个元素可以写多组动画：
animation: 动画1, 动画2, 动画3, .....; [多组动画之间用逗号隔开]
