动画

过渡可以实现两个状态间变化过程，但是实现不了多个状态间的变化过程而动画可以实现，动画过程可控（重复播放，最终画面，是否暂停）
动画的本质： 快速切换大量图片是在人脑中形成具有连续性的画面

构成动画的最小单元： 帧和动画帧

目标： 使用animation添加动画效果

实现步骤：

1.定义动画

@keyframes 动画名称{ @keyframes 动画名称{
from{} 0%{}
to{} 10%{}
15%{}
100%{}
}
}
animation: 动画名称 动画花费时长

动画的复合属性：

animation:动画名称 动画时长 速度曲线 延时时间 重复次数 动画方向 执行完毕时状态

注意:

动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个表示时长，第二个表示延迟时间

动画的单个属性：

animation-direction:alternate-reverse;
默认值 normal 先正再正 常用
alternate 先正再返
alternate-reverse 先反后正