Libro de recetas de la API web

Capítulo 8. La API de animaciones web

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Introducción

Hay varias formas de animar elementos en los navegadores web modernos. En el Capítulo 1 había un ejemplo de uso de la API requestAnimationFrame para animar manualmente un elemento (ver "Animar un elemento con requestAnimationFrame"). Esto te da mucho control, pero tiene un coste. Requiere llevar un registro de marcas de tiempo para calcular la frecuencia de fotogramas, y debes calcular cada cambio incremental de la animación en JavaScript.

Animación basada en fotogramas clave

CSS3 introdujo las animaciones de fotogramas clave. Especificas el estilo inicial, el estilo final y una duración dentro de las reglas CSS. El navegador interpola automáticamente, o rellena, los fotogramas intermedios de la animación. Las animaciones se definen con la regla @keyframes y se utilizan mediante la propiedad animation. El ejemplo 8-1 define unaanimación de fundido de entrada.

Ejemplo 8-1. Utilizar una animación de fotogramas clave CSS

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.some-element {
  animation: fade 250ms;
}

Una animación de fundido comienza con una opacidad de 0 y termina con una opacidad de 1. Cuando se ejecuta la animación, el navegador calcula los fotogramas de estilo intermedios en el transcurso de 250 milisegundos. La animación comienza en cuanto el elemento entra en el DOM o se aplica la clase ...