动画
使元素从一种样式逐渐变为另一种样式，就是将多个过渡效果结合在一起
动画是通过关键帧来控制动画的每一步
动画执行的时间点，在该时间点上的样式
一、动画的使用步骤
1、声明动画（定义很多关键帧）
@keyframes 动画名称{
0%{动画样式1}
25%{动画样式2}
50%{动画样式3}
75%{动画样式4}
100%{动画样式5}
}
2、调用动画
（1）指定动画名称：animation-name：动画名称
（2）指定动画播放的一个周期：animation-duration：s为单位的数字
（3）指定动画播放的速度时间曲线函数：animation-timing-function：ease/linear/ease-out/ease-in-out
（4）指定动画的延迟：animation-delay
（5）动画播放的次数：animation-iteration-count,
取值：
具体次数，数字
infinite，无限次
（6）动画的执行方向，animation-direction：alternate
取值：
normal，默认值，正常播放0-100
reverse 逆向播放 100-0
alternate 轮流播放 奇数次正向，偶数次负向
（7）animation-fill-mode
规定动画在播放前或者播放后的显示状态
none：默认值，不显示
forwards：动画播放完成后，保存最后一帧状态
backward：动画播放之前，在延时的过程中，动画显示第一zhen
3、调用函数简写方式
animation：name duration timing-function delay iteration-count direction
最简洁方式：animation：动画名 时间