动画

animation和@keyframs(添加动画效果)

1.定义动画（@keyframs）

        @keyframes 动画名 {
            from {
                开始的内容
            }
            to {
                结束的内容
            }    
        }

        @keyframes ani_1 {
            0% {
                初始内容
            }
            50% {
                时间50%的内容效果
            }
            100% {
                时间结束时的效果
            }
        }

2.使用动画（animation）

1.animation-name：动画名称（必要属性）

2.animation-duration：播放时长（必要属性）

3.animation-delay：播放延迟时间

（1）（在延迟的时间内，动画的状态为盒子最初的状态，而不是@keyframes里面的初始状态）（必须写在播放时长后面）

4.animation-fill-mode：播放结束后动画停留的状态

（1）backwards：播放前的延迟状态@keyframes里面的from或者0%时的状态，播放结束回到原来的状态。

（2）forwards：播放结束后停留在结束时的状态，即@keyframes里面to或者100%时的状态。

（3）both：同时拥有forwards和backwards属性；播放前的延迟状态为@keyframes里面的from或者0%时的状态，播放结束后停留在结束时的状态，即@keyframes里面to或者100%时的状态。

5.animation-iteration-count：播放的次数

（1）infinite为无限播放。

6.animation-direction：播放的方向

（1）normal：默认值，正序播放。

（2）alternate：先正后反。

（3）reverse：倒序播放。

（4）alternate-reverse：先反后正。

7.animation-play-state：播放控制

（1）paused：播放暂停。

（2）running：播放开始。

8.animation-timing-function：速度曲线

（1）linear：匀速播放

（2）ease-in：先快后慢

（3）ease-out：先慢后快

（4）steps（n）：（逐帧动画）跳跃式变化，n为跳动的次数，把一个动画过程等分成n次跳动。

\