Uno stile che descrive l'animazione CSS e una serie di fotogrammi chiave che indicano gli stati di inizio e fine dello stile dell'animazione, così come potenziali punti intermedi, costituiscono un'animazione.

Le animazioni CSS forniscono tre grandi vantaggi rispetto alle tradizionali tecniche di animazione basate su script: Sono semplici da usare per animazioni semplici, e non c'è nemmeno bisogno di conoscere JavaScript per farle.

Anche sotto un moderato stress di sistema, le animazioni funzionano bene. In JavaScript, le animazioni semplici spesso funzionano male.

Per rendere la performance il più fluida possibile, il motore di rendering può utilizzare il frame-skipping e altri approcci. 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 permette di personalizzare il tempo, la durata e altri aspetti della sequenza di animazione. Questo non influenza l'aspetto dell'animazione, che è controllato dalla at-rule @keyframes, come menzionato in Usare i fotogrammi chiave per definire la sequenza di animazione Le sotto-proprietà dell'animazione animation-name Indica il nome della at-rule @keyframes che descrive i fotogrammi chiave dell'animazione. Imposta la quantità di tempo che un'animazione impiega per completare un ciclo.