动画基本实现

使用 from...to 定义动画

@keyframes 动画名称 {
            from {}
            to {}
        }

使用 百分比 定义动画

@keyframes 动画名称 {
            0% {}
            10% {}
            15% {}
            100% {}
        }

使用动画

animation: 动画名称 动画花费时长;

案例 from...to

    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 使用动画 */
            animation: change 1s;
        }

        	/* 定义动画 从200变大到600 */
       	 	@keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>

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

---

案例 百分比

<style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 使用动画 */
            animation: change 1s;
        }

        /* 定义动画 */
        @keyframes change {
            /* 百分比指的是动画总时长的占比 */
            0% {
                width: 200px;
            }
            50% {
                width: 300px;
                height: 200px;
            }
            100% {
                width: 400px;
                height: 300px;
            }
        }
    </style>

animation复合属性

使用animation相关属性控制动画执行过程

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

动画名称和动画时长必须赋值

取值不分先后顺序

如果有2个时间值，第一个时间表示动画时长，第二个表示延迟时间

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	执行完毕时状态	forwards:最后一帧状态 backwards:第一帧状态
animation-timing-function	速度曲线	steps(数字)：逐帧动画
animation-iteration-count	重复次数	infinite 为无限循环
animation-direction	动画方向	alternate为反向
animation-play-state	暂停动画	paused 为暂停，通常配合:hover使用

  <style>
    .box {
      position: absolute;
      left: 0;
      width: 140px;
      height: 140px;
      background-image: url(./images/bg.png);
      animation: run 1s steps(12) infinite, 
      translate 3s linear forwards;
    }

    @keyframes run {
      100% {
        background-position: -1680px 0;
      }
    }

    @keyframes translate {
        0% {
        left: 600px;
      }
        100% {
        left: 600px;
      }
    }
  </style>