Anche sotto un moderato stress di sistema, le animazioni funzionano bene. In JavaScript, le animazioni semplici spesso funzionano male.
Permettere al browser di regolare la sequenza delle animazioni permette al browser di migliorare le prestazioni e l'efficienza limitando la frequenza di aggiornamento delle animazioni nelle schede che non sono attualmente visibili, per esempio.
Per fare una sequenza di animazione CSS, usate la proprietà animation o le sue sotto-proprietà per stilizzare l'elemento che volete animare.
Questo non influenza l'aspetto dell'animazione, che è controllato dalla at-rule @keyframes, come menzionato in Usare i fotogrammi chiave per definire la sequenza dell'animazione Le sotto-proprietà dell'animazione animation-name Indica il nome della at-rule @keyframes che descrive i fotogrammi chiave dell'animazione.
Specificare la curva di velocità dell'animazione.
I seguenti valori sono possibili per la proprietà animation-timing-function:- Definisce un'animazione con un inizio lento, poi un inizio veloce, e poi una fine lenta (questo è il default) - Definisce un'animazione che corre alla stessa velocità dall'inizio alla fine. - Definisce un'animazione con un inizio lento. - Definisce un'animazione con una fine lenta. - Definisce un'animazione con inizio e fine graduale. - In una funzione cubo-bezier, è possibile definire i propri valori. Alcune delle numerose curve di velocità che possono essere impiegate sono mostrate nell'esempio seguente.
