Explicación detallada del uso de animación de animación CSS

Tabla de contenido

1. Los pasos de la animación de animación.

Paso 1: Definir la animación

Paso dos: usar animaciones

En segundo lugar, las propiedades compuestas de la animación.

3. El atributo dividido de la animación.

4. Propiedades de animación

---

---

1. Los pasos de la animación de animación.

Paso 1: Definir la animación

//changes为定义的动画名称
  //①两种状态的变化
 @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }

//②多种状态的变化 
//百分比为动画占总时长的占比
  @keyframes changes {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        } 

Paso dos: usar animaciones

//给需要调用动画的类名或标签加上animation change为动画名称 1s为动画时长
.box{
    animation:change 1s;
}

En segundo lugar, las propiedades compuestas de la animación.

• animación: nombre de la animación, tiempo de la animación, duración, curva de velocidad, tiempo de retraso, número de repeticiones, el estado cuando se ejecuta la dirección de la animación

//animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态
//liner为匀速
animation:change 1s linear
//step(3) 为分布动画
animation:change 1s step(3)
 // 5s为延迟时间 infinite无限 alternate反方向 
animation: change 1s steps(3) 5s infinite alternate;
//执行完毕时的状态(最开始backwards,最终forwards) 不能设置重复次数 与 动画方向
animation:change 1s forwards

3. El atributo dividido de la animación.

4. Propiedades de animación

• Animación fotograma a fotograma (utilizada con la imagen del sprite) función de tiempo de animación: paso (N) N significa dividir la animación en N partes (el mismo número de imágenes pequeñas que la imagen del sprite)
• Múltiples conjuntos de animación animación: animación 1, animación 2, animación N (separados por comas)

•  .box {
              width: 140px;
              height: 140px;
              background-image: url(./images/bg.png);
              /* 跟多个动画用逗号隔开 */
              animation: run 1s steps(12) infinite, moves 1s forwards;
          }
          /* 定义动画 */
          
          @keyframes run {
              /* 背景图改位置 从0的位置到图片的最大宽度*/
              from {
                  background-position: 0 0;
              }
              to {
                  /* 往左挪时负的 */
                  background-position: -1680px 0;
              }
          }
          /* 定义盒子移动的动画 */
          
          @keyframes moves {
              /* 如果最初始的动画开始样式可以省略from */
              from {
                  transform: translateX(0);
              }
              to {
                  transform: translateX(800px);
              }
          }