Web API Cookbook

Capitolo 8. L'API per le animazioni web

Questo lavoro è stato tradotto utilizzando l'AI. Siamo lieti di ricevere il tuo feedback e i tuoi commenti: [e-mail]

Introduzione

Esistono diversi modi per animare gli elementi nei moderni browser web. Il Capitolo 1 contiene un esempio di utilizzo dell'API requestAnimationFrame per animare manualmente un elemento (vedi "Animare un elemento con requestAnimationFrame"). Questo ti dà molto controllo, ma a un costo. Richiede di tenere traccia dei timestamp per calcolare la frequenza dei fotogrammi e devi calcolare ogni cambiamento incrementale dell'animazione in JavaScript.

Animazione basata sui fotogrammi chiave

CSS3 ha introdotto le animazioni keyframe. All'interno delle regole CSS puoi specificare lo stile iniziale, lo stile finale e la durata. Il browser interpola automaticamente, o riempie, i fotogrammi intermedi dell'animazione. Le animazioni vengono definite con la regola @keyframes e utilizzate tramite la proprietà animation. L 'esempio 8-1 definisce un'animazione di dissolvenza in entrata.

Esempio 8-1. Utilizzo di un'animazione keyframe CSS

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

Un'animazione di dissolvenza inizia con un'opacità di 0 e termina con un'opacità di 1. Quando l'animazione viene eseguita, il browser calcola i fotogrammi di stile intermedi nell'arco di 250 millisecondi. L'animazione inizia non appena l'elemento entra nel DOM o viene applicata ...