HTML(30)——动画

A阳俊yi2024-07-10 14:40

动画

实现步骤

定义动画

@keyframes 动画名称{

from{}

to{}

}
@keyframes 动画名称{

0%{}

10%{}

....

100%{}

}

2.使用动画

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

示例：盒子的宽度从200变到400px，两个状态一般用from to的形式

  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: pink;
      animation: change 2s;
    }

    @keyframes change {
      from {
        width: 200px;
      }

      to {
        width: 400px;
      }
    }
  </style>
</head>

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

多个状态变化：

  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: pink;
      animation: change 2s;
    }

    @keyframes change {
      10% {
        width: 200px;
      }

      50% {
        width: 400px;
      }

      100% {
        width: 800px;
      }
    }
  </style>
</head>

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

animation属性

animation是复合属性，包括：

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

注意：

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

取值不分先后顺序

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

同时也可以拆分成多个属性

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