Propiedades de animación

7.1 Propiedad animation-name

Las animaciones CSS permiten crear efectos visuales dinámicos y suaves, mejorando la interfaz de usuario y haciéndola más interactiva. Las propiedades de animación permiten controlar varios aspectos de la animación, como el nombre, la duración, la función de temporización y el retraso. Ahora vamos a ver estas propiedades en detalle y a mostrar cómo usarlas.

La propiedad animation-name define el nombre de la animación que se aplicará al elemento. El nombre debe coincidir con el nombre definido en la regla @keyframes.

Sintaxis:

    
      element {
        animation-name: animation-name;
      }
    
  

Donde:

• animation-name: nombre de la animación definido en @keyframes

Ejemplo:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
      }
    
  

Explicación del código:

• @keyframes moveRight: define una animación llamada moveRight que mueve el elemento hacia la derecha
• .box: elemento con la animación aplicada moveRight

7.2 Propiedad animation-duration

La propiedad animation-duration define la duración de la animación. El valor se especifica en segundos (s) o milisegundos (ms).

Sintaxis:

    
      element {
        animation-duration: time;
      }
    
  

Donde:

• time: duración de la animación (por ejemplo, 2s para dos segundos o 500ms para 500 milisegundos).

Ejemplo:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
      }
    
  

Explicación del código:

• animation-duration: 2s: establece la duración de la animación moveRight a 2 segundos

7.3 Propiedad animation-timing-function

La propiedad animation-timing-function define la velocidad del cambio de la animación a lo largo del tiempo. Permite crear diferentes efectos de animación, como aceleración, desaceleración, etc.

Sintaxis:

    
      element {
        animation-timing-function: function;
      }
    
  

Donde:

• function: función de temporización que define la velocidad del cambio de la animación (por ejemplo, ease, linear, ease-in, ease-out, ease-in-out)

Ejemplo:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
      }
    
  

Explicación del código:

• animation-timing-function: ease-in-out: establece la función de temporización para la animación moveRight, haciendo la animación suave con un comienzo y final lentos, y una aceleración en el medio

Principales funciones de temporización:

• ease: la animación comienza lentamente, se acelera hacia el medio y disminuye hacia el final
• linear: la animación ocurre a una velocidad constante de principio a fin
• ease-in: la animación comienza lentamente y luego acelera
• ease-out: la animación comienza rápido y luego disminuye
• ease-in-out: la animación comienza y termina lentamente, acelerándose en el medio

7.4 Propiedad animation-delay

La propiedad animation-delay define el retraso antes de que comience la animación. El valor se especifica en segundos (s) o milisegundos (ms).

Sintaxis:

    
      element {
        animation-delay: time;
      }
    
  

Donde:

• time: retraso antes de que comience la animación (por ejemplo, 1s para un segundo o 500ms para 500 milisegundos)

Ejemplo:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
      }
    
  

Explicación del código:

• animation-delay: 1s: establece un retraso de 1 segundo antes de que comience la animación moveRight