Las animaciones pueden crear efectos complejos y dinámicos para mejorar la experiencia interactiva del usuario. Las animaciones no requieren un evento desencadenante específico y pueden configurarse para repetirse infinitamente. Además, las animaciones pueden tener múltiples estados intermedios entre el estado inicial y el final, lo que proporciona mayor flexibilidad y control sobre los efectos visuales producidos.

Crear animación

Se pueden crear animaciones utilizando la regla @keyframes, que define un conjunto de estilos CSS en varios puntos de una animación. Además, se asigna un nombre a la animación. Este debe ser descriptivo, es decir, indicar el tipo de animación.

@keyframes AnimationName {
 /* Styles at various points (at least initial and final) */ 
}

Para determinar el cambio de propiedades en un punto específico en el tiempo, se pueden utilizar las palabras clave: from (0%) y to (100%). Con mayor frecuencia, se emplean valores porcentuales.

@keyframes AnimationName {
  0% {
    /* Properties to be changed */
  }

  10% {
    /* Properties to be changed */
  }

  30% {
    /* Properties to be changed */
  }

  /* As many as we need */
  
  100% {
    /* Properties to be changed */
  }
}

Una vez declarada la animación, se puede utilizar el nombre de los keyframes como valor para la propiedad animation-name en varios elementos. Otra ventaja de las animaciones es que pueden aplicarse repetidamente a múltiples elementos.

selector {
  animation-name: AnimationName;
}

Práctica

Agreguemos animación al elemento div. La tarea consiste en cambiar la propiedad background-color con el tiempo. El estado inicial será green, luego al 60% debe ser red, y en el estado final, debe ser blue. Además, se especificará la propiedad animation-duration para observar la animación en funcionamiento.