Livro de receitas da API da Web

Capítulo 8. A API de animações da Web

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

Introdução

Existem algumas maneiras diferentes de animar elementos nos navegadores web modernos. O Capítulo 1 apresentou um exemplo de utilização da API requestAnimationFrame para animar manualmente um elemento (consulte "Animar um elemento com requestAnimationFrame"). Isto dá-te muito controlo, mas com um custo. Requer o acompanhamento de carimbos de data/hora para calcular as taxas de quadros, e você deve calcular cada mudança incremental da animação em JavaScript.

Animação baseada em keyframes

CSS3 introduziu as animações de keyframe. Especifica o estilo inicial, o estilo final e uma duração nas regras CSS. O browser interpola automaticamente, ou preenche, os fotogramas intermédios da animação. As animações são definidas com a regra @keyframes e utilizadas através da propriedade animation. O Exemplo 8-1 define umaanimação de fade-in.

Exemplo 8-1. Usa uma animação de keyframe CSS

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

Uma animação fade-in começa com uma opacidade de 0 e termina com uma opacidade de 1. Quando a animação é executada, o browser calcula os fotogramas de estilo intermédios ao longo de 250 milissegundos. A animação começa assim que o elemento entra no DOM ou quando a classe some-element é aplicada.

Animação de keyframes com JavaScript

A API Web ...