快速上手 CSS动画属性 animation

@keyframes 动画名称{     <!-- 两个状态 -->
    form{}
    to{}
}
@keyframes 动画名称{     <!-- 多个状态 -->
    10%{}   <!-- 时间的百分之10 -->
    ....
    100%{}
}
animation: 动画名称 持续时间 速度曲线 延迟时间 重复次数  动画方向  执行完毕状态; <!--除持续时间和持续时间需要一前一后外,其余属性无序 -->
速度曲线: linear/step(n)
重复次数: n/infinite 
动画方向: alternate     <!--(反向效果)-->
执行完毕状态: backwards<!-- (默认值,最初状态,动画播放完立即回到初始状态) -->/forwards<!-- (动画完成停留在动画最后一刻) (要把infinite去掉,不然没效果)-->

<!-- 暂停动画(配合hover使用)  -->
animation-play-state:paused;