CSS —— 动画animation

1.本质：快速切换大量图片，形成具有连续性的画面，就是动画

2.实现步骤

① 定义动画

写法一：

        @keyframes 动画名 {

        from {开始时状态}

        to{结束时状态}

        }

写法二：

       @keyframes 动画名 {

       0% {开始时状态}

       50%{50%时状态}

       100%{100%时状态}

        }

② 调用动画

animation：动画名称  时长 速度  延迟时间  重复次数  方向 执行完状态；

*动画属性取值：

3.  逐帧动画：  animation-timing-function：step（）；

*注意：只有精灵图用逐帧动画，有几个动作图片就分几步。

4. 多组动画   animation:动画1，动画2，动画3……；

---

案例：奔跑的小人

body

<div class="box"> </div>

style 

        .box{
            width: 140px;
            height: 140px;
            background-image: url(./images/bg.png);
            animation: 
            move .5s steps(12) infinite,
            run 1s forwards;
            transition: all .5s;
        }
        @keyframes move{
            from{
                background-position: 0 0;
            }
            to{
                background-position: 1680px 0;
            }
        }
        @keyframes run {
            from{
                transform: translateX(0);
            }
            to{
                transform: translateX(800px);
            }
        }