Animazioni CSS

A cosa serve animare

Quando qualcosa cambia in una pagina — un menu si apre, un bottone reagisce, una notifica compare — il browser ha due strade: mostrare il risultato finale di colpo, oppure far vedere il cambiamento mentre succede.

La differenza sembra piccola, ma si sente. Senza movimento, ogni modifica arriva dal nulla e l'occhio deve cercare cosa è diverso. Con un breve passaggio animato, il cambiamento si racconta da solo.

Cinque ruoli del movimento

Prima di scrivere transition o animation, vale la pena chiedersi che ruolo stia giocando il movimento. Quasi sempre ricade in una di queste cinque categorie.

Il sito deve funzionare anche senza movimento

Le animazioni sono un miglioramento (in inglese si dice enhancement), non un requisito. La pagina deve restare leggibile e utilizzabile anche se le animazioni non partono: perché l'utente le ha disattivate, perché il browser non supporta una feature moderna, perché siamo sul primo render prima che il JavaScript abbia caricato.

Concretamente, lo stato finale di un'animazione deve essere comunque visibile e raggiungibile, non nascosto in attesa che il movimento "lo riveli".

Transition: interpolazione automatica

Una transition (transizione) è un'istruzione per il browser: invece di passare di colpo da un valore CSS a un altro, calcola i valori intermedi e disegna il cambiamento nel tempo. Questa interpolazione automatica si chiama, appunto, transizione.

Senza transition, il browser applica il nuovo valore istantaneamente:

.button:hover {
  transform: translateY(-8px);
}

Il bottone salta nella nuova posizione nel fotogramma successivo all'hover.

Con transition, il browser distribuisce il cambiamento nel tempo:

.button {
  transition: transform 250ms;
}

.button:hover {
  transform: translateY(-8px);
}

Per 250 millisecondi il transform viene interpolato fotogramma per fotogramma. Lo stato di arrivo è lo stesso, ma il percorso diventa visibile.

La regola transition non descrive un'animazione completa: dichiara come reagire quando un valore CSS cambia. La causa del cambiamento — hover, focus, una classe aggiunta da JavaScript — resta fuori dalla regola.

.button {
  transition: transform 250ms;
}

.button:hover {
  transform: translateY(-8px);
}

Le componenti di transition

La proprietà transition è uno shorthand: una scorciatoia che mette più informazioni nella stessa dichiarazione. Prima di usarla con sicurezza, conviene vedere le singole componenti.

Una transizione risponde a quattro domande:

1. transition-property: quale proprietà CSS deve cambiare nel tempo. Può essere una singola proprietà, una lista separata da virgole o all.
2. transition-duration: quanto dura il passaggio. Si scrive in secondi (0.3s) o millisecondi (300ms).
3. transition-timing-function: con che ritmo avanza la transizione. È la parte che cambia il feeling del movimento.
4. transition-delay: quanto tempo aspetta prima di partire. Il valore iniziale è 0s.

Scritta per esteso, una transizione può apparire così:

.card {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 100ms;
}

.card:hover {
  transform: translateY(-8px);
}

Con lo shorthand, le stesse informazioni stanno in una riga:

.card {
  transition: transform 300ms ease-in-out 100ms;
}

Proprietà e durata

Per definire una transition servono almeno due informazioni:

1. quale proprietà animare;
2. quanto deve durare il passaggio.

.card {
  transition: transform 250ms;
}

.card:hover {
  transform: scale(1.04);
}

Possiamo animare più proprietà nello stesso elemento separandole con la virgola. Ogni proprietà può avere durata e ritmo propri:

.card {
  transition:
    transform 250ms,
    opacity 250ms;
}

.card:hover {
  transform: translateY(-6px);
  opacity: 0.4;
}

.card {
  transition: transform 250ms;
}

.card:hover {
  transform: translateY(-6px);
}

Evitare transition: all

Il valore speciale all chiede al browser di animare qualunque proprietà cambi:

.card {
  transition: all 250ms;
}

Funziona, e all'inizio sembra il modo più rapido per non doversi ricordare i nomi delle proprietà. Il problema si vede più avanti: appena aggiungete o modificate width, height, margin, color, background, il browser comincia ad animare anche quelle, senza che ve ne accorgiate.

Vale la pena dichiarare solo le proprietà che intendete davvero animare:

.card {
  transition:
    transform 250ms,
    box-shadow 250ms;
}

Se in futuro ne vorrete animare un'altra, la aggiungete esplicitamente: meglio una riga in più che un comportamento a sorpresa.

Per rendere il confronto leggibile in aula, nella preview la durata è rallentata a 2000 ms: così si vede che nella versione esplicita il colore cambia subito, mentre movimento e ombra continuano ad animarsi.

Timing function: il ritmo

La timing function (funzione di temporizzazione) descrive come la transition distribuisce il cambiamento all'interno della propria durata.

Il tempo totale resta lo stesso, ma il ritmo cambia: un movimento può iniziare lento e finire veloce, scattare in avanti e poi rallentare, oppure mantenere un'andatura costante.

.ball {
  transition: transform 800ms ease-out;
}

Durate realistiche

Non esiste una durata "perfetta", ma molti micro-movimenti di interfaccia funzionano bene tra 200ms e 500ms.

• hover di un bottone: circa 150-250 ms;
• card che entra in scena: circa 250-400 ms;
• modale che appare: circa 350-500 ms;
• uscita di un elemento che l'utente ha chiuso: spesso più rapida dell'entrata.

.button {
  transition: transform 180ms ease-out;
}

.modal {
  transition:
    opacity 300ms ease-out,
    transform 400ms ease-out;
}

.button {
  transition: transform 250ms ease-out;
}

Transition-delay

transition-delay aggiunge un'attesa prima che la transizione cominci.

.menu {
  opacity: 0;
  transition: opacity 250ms;
  transition-delay: 300ms;
}

.menu-wrapper:hover .menu {
  opacity: 1;
  transition-delay: 0ms;
}

In questo esempio l'apertura del menu è immediata (transition-delay: 0ms nello stato hover), mentre la chiusura aspetta 300 ms prima di partire. Risultato: se il mouse esce per un istante e rientra subito, il menu non si chiude e riapre nervosamente.

.menu {
  opacity: 0;
  transition: opacity 250ms;
  transition-delay: 300ms;
}

.menu-wrapper:hover .menu {
  opacity: 1;
  transition-delay: 0ms;
}

Entrata e uscita: ritmi diversi

L'entrata e l'uscita di un elemento possono meritare tempi e ritmi diversi. Un trucco classico: scrivere una transition di base sullo stato "a riposo" e una diversa nello stato attivato. Quando lo stato cambia, vale la transition di destinazione.

.button-face {
  transform: translateY(0);
  transition: transform 400ms ease-out;
}

.button:hover .button-face {
  transform: translateY(-4px);
  transition: transform 150ms ease-out;
}

Quando il mouse entra, parte la transition rapida (150 ms): il bottone reagisce subito. Quando il mouse esce, vale di nuovo la transition base (400 ms): il bottone ritorna giù in modo più morbido.

A volte conviene rendere l'entrata più rapida dell'uscita, altre volte il contrario: dipende dal tono che state cercando.

.button-face {
  transform: translateY(0);
  transition: transform 400ms ease-out;
}

.button:hover .button-face {
  transform: translateY(-4px);
  transition: transform 150ms ease-out;
}

.button:active .button-face {
  transform: translateY(2px);
  transition-duration: 0ms;
}

Doom flicker

Un bug ricorrente nelle micro-interazioni con hover:

.button {
  transition: transform 200ms;
}

.button:hover {
  transform: translateY(-10px);
}

Sembra innocuo. Su movimenti ampi smette di esserlo. Se il bottone si solleva mentre il mouse è vicino al bordo inferiore, il cursore può ritrovarsi fuori dall'elemento. A quel punto :hover non vale più, il bottone torna giù, il cursore lo intercetta di nuovo, :hover si riattiva, il bottone si solleva di nuovo. È il doom flicker: il flicker maledetto.

La soluzione è separare trigger ed effetto:

<button class="button">
  <span class="button-face">Salva</span>
</button>

.button {
  padding: 0;
  border: 0;
  background: transparent;
}

.button-face {
  display: block;
  padding: 16px 24px;
  border: 2px solid currentColor;
  background: white;
  transition: transform 200ms;
}

.button:hover .button-face {
  transform: translateY(-10px);
}

Il <button> resta fermo nella sua posizione e continua a ricevere l'hover. Si muove il <span> interno, ma quello span non è solo un'etichetta: è la faccia visiva completa del bottone, con padding, bordo e sfondo. Il cursore non lo perde mai.

Cosa possiamo animare?

transition-property sceglie quale proprietà CSS deve cambiare nel tempo. Il browser può creare una transizione fluida solo quando sa calcolare valori intermedi tra lo stato A e lo stato B.

.card {
  opacity: 1;
  transform: translateY(0);
  background-color: white;
  transition:
    opacity 250ms ease-out,
    transform 250ms ease-out,
    background-color 250ms ease-out;
}

.card:hover {
  opacity: 0.65;
  transform: translateY(-8px);
  background-color: #ede9fe;
}

.panel {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 250ms ease-out,
    visibility 0s linear 250ms;
}

.panel.is-hidden {
  opacity: 0;
  visibility: hidden;
}

Keyframe animations: sequenze indipendenti dallo stato

Le transition sono ottime quando esistono due stati CSS ben definiti: normale e hover, chiuso e aperto, visibile e nascosto. Il browser fa il resto.

Le keyframe animations servono quando volete descrivere una sequenza che si svolge nel tempo, indipendentemente da uno stato. Per esempio: "all'apertura della pagina, questo titolo entra dall'alto" o "questo badge pulsa tre volte e si ferma".

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes definisce i passaggi e prende un nome (qui slide-in). La proprietà animation applica quei passaggi a un elemento concreto:

.panel {
  animation: slide-in 500ms ease-out;
}

@keyframes + animation

Un'animazione CSS ha due parti che lavorano insieme:

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.badge {
  animation: pop-in 300ms ease-out;
}

Il nome pop-in collega il blocco @keyframes all'elemento .badge. Le parole chiave from e to sono scorciatoie per 0% e 100%: tornano comode quando l'animazione ha solo punto di partenza e arrivo.

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.badge {
  animation: pop-in 300ms ease-out;
}

Movimento + opacità

Dentro un singolo blocco @keyframes possiamo cambiare più proprietà insieme. È il pattern più comune per le "entrate" di un elemento: combinare opacità e una piccola traslazione fa percepire l'arrivo senza essere invadente.

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-32px) rotate(-8deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

.note {
  animation: drop-in 600ms ease-out;
}

Ripetere un'animazione

Per default, un'animazione CSS parte una volta sola e si ferma.

animation-iteration-count controlla quante volte ripetere:

.pulse {
  animation-name: pulse;
  animation-duration: 900ms;
  animation-iteration-count: 3;
}

Il valore speciale infinite ripete senza fine:

.spinner {
  animation: spin 800ms linear infinite;
}

Percentuali nei keyframe

from e to sono scorciatoie per 0% e 100%. Quando l'animazione ha più passaggi, le percentuali diventano necessarie: ogni percentuale rappresenta un punto della timeline.

@keyframes badge-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  60% {
    transform: scale(1.08);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

In questo esempio, il badge entra ingrandendosi oltre il punto di arrivo (1.08) e poi si "assesta" a scala 1. È il classico overshoot, che dà personalità al movimento senza esagerare.

Direzione dei keyframe

animation-direction controlla in che ordine il browser legge i keyframe.

@keyframes breathe {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.2);
  }
}

.breathing-box {
  animation: breathe 1200ms ease-in-out infinite alternate;
}

Con il valore alternate, un ciclo va da 0% a 100%, il successivo torna da 100% a 0%, e così via. Senza alternate, alla fine di ogni ciclo il browser tornerebbe di colpo al punto di partenza.

Uso tipico: una pulsazione che respira, un indicatore di attesa, un'onda che invita al clic.

Shorthand animation

Quasi tutte le proprietà animation-* possono entrare nello shorthand animation:

.box {
  animation: breathe 1200ms ease-in-out infinite alternate;
}

È equivalente a scrivere:

.box {
  animation-name: breathe;
  animation-duration: 1200ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.toast {
  animation: slide-in 400ms ease-out both;
  animation-delay: 300ms;
}

.toast {
  animation: slide-in 400ms ease-out both;
  animation-delay: 300ms;
}

Lo stato finale non viene mantenuto

Un caso che capita spesso. Questo codice fa sfumare l'elemento fino a sparire, ma alla fine dell'animazione l'elemento torna visibile:

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.box {
  animation: fade-out 1000ms;
}

L'animazione dura un secondo, l'opacità scende a zero, e poi l'elemento riappare di colpo.

Le dichiarazioni dentro un keyframe valgono solo mentre l'animazione è attiva. Quando finisce, il browser smette di applicarle e torna alle regole CSS normali dell'elemento. Nel nostro caso .box non ha un'opacity dichiarata, quindi vale il default 1: l'elemento ricompare.

Fill mode: prima e dopo l'animazione

animation-fill-mode controlla se i valori dei keyframe vengono applicati anche fuori dalla durata dell'animazione: prima che cominci, durante un eventuale delay, o dopo che è finita.

Per rendere la differenza visibile, usiamo un esempio in cui lo stato CSS normale è volutamente diverso sia dal keyframe iniziale sia da quello finale.

.toast {
  background: #f3f4f6;
  opacity: 0.35;
  transform: translateY(-18px);
  animation-name: slide-in;
  animation-duration: 700ms;
  animation-timing-function: ease-out;
  animation-delay: 600ms;
  animation-fill-mode: backwards;
}

Con backwards, durante il delay il toast usa già il keyframe iniziale. Con forwards, dopo la fine mantiene il keyframe finale. Con both, applica entrambe le cose.

Scegliere lo strumento

Le due famiglie si sovrappongono in alcuni casi e si distinguono in altri. Lo strumento giusto dipende da cosa state raccontando: un passaggio tra stati o una sequenza nel tempo.

Mettere in pausa

animation-play-state può fermare e riprendere un'animazione senza ricrearla.

.loader {
  animation: spin 900ms linear infinite;
  animation-play-state: running;
}

.loader.is-paused {
  animation-play-state: paused;
}

Mini snippet JS per togglare la classe, e quindi lo stato di play:

const button = document.querySelector(".pause-button");
const loader = document.querySelector(".loader");

button.addEventListener("click", function () {
  loader.classList.toggle("is-paused");
});

Stati CSS e azioni percepite

In CSS pensiamo a stati: chiuso o aperto, spento o acceso, inattivo o attivo. L'utente percepisce azioni: sto aprendo, sto chiudendo, sto premendo, ho appena rilasciato.

Le due azioni opposte non meritano lo stesso ritmo. Aprire spesso vuole gradualità per dare tempo agli occhi di trovare il nuovo contenuto. Chiudere può essere più rapido: l'utente ha già deciso, non serve trattenerlo.

.panel {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 180ms ease-in,
    transform 180ms ease-in;
}

.panel.is-open {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 360ms ease-out,
    transform 360ms ease-out;
}

La transition nello stato .is-open decide il ritmo dell'apertura. Quando la classe .is-open viene rimossa, vale di nuovo la transition base, che decide il ritmo della chiusura.

Orchestrazione: delay scalati

Orchestrare significa distribuire più elementi animati lungo una stessa timeline, in modo che si succedano invece di sovrapporsi tutti insieme.

Esempio classico: una modale. Il backdrop sfuma subito, il pannello entra leggermente dopo, il bottone di chiusura compare per ultimo.

.backdrop {
  transition: opacity 300ms ease-out;
}

.dialog {
  transition: transform 350ms ease-out;
  transition-delay: 120ms;
}

.close-button {
  transition: opacity 180ms ease-out;
  transition-delay: 300ms;
}

Cosa fa il browser in ogni frame

Perché un'animazione sembri fluida, il browser deve aggiornarla molte volte al secondo. A 60 frame al secondo ha circa 16 millisecondi per preparare ogni frame: se ci mette di più, il movimento appare a scatti.

1. Style: il browser decide quali regole CSS valgono per ogni elemento.
2. Layout: calcola posizione e dimensione di ogni elemento.
3. Paint: colora i pixel di ogni livello.
4. Compositing: assembla i livelli sullo schermo.

Proprietà spesso costose:

height
width
margin
padding
top
left

Proprietà spesso più adatte all'animazione:

transform
opacity

Muovere senza ricalcolare tutto

Due modi diversi per ottenere lo stesso movimento visivo:

.box-a:hover {
  margin-top: 12px;
}

.box-b:hover {
  transform: translateY(12px);
}

La prima versione cambia il margin-top reale dell'elemento: il browser ricalcola il layout della pagina, perché spostare quella box può influenzare la posizione degli elementi vicini.

La seconda versione lavora sul livello visivo dell'elemento: lo trasla senza modificarne la posizione nel layout. Il movimento è quasi sempre più fluido.

will-change è un suggerimento al browser: "questa proprietà sta per cambiare, preparati":

.card {
  will-change: transform;
}

prefers-reduced-motion

La media query prefers-reduced-motion permette di sapere se l'utente ha chiesto al sistema operativo di ridurre il movimento delle interfacce.

Il pattern consigliato è partire da una versione stabile e priva di animazioni, poi abilitare il movimento solo dentro no-preference.

.card {
  transform: translateY(0);
}

.card:hover {
  transform: translateY(-8px);
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 220ms ease-out;
  }
}

In questo modo, chi ha attivato la riduzione del movimento riceve comunque il cambio di stato, ma senza la transizione animata.

Animazioni guidate dallo scroll

Finora le animazioni avanzavano nel tempo: 800 ms di durata significavano 800 ms di movimento, indipendentemente da cosa stesse facendo l'utente.

.box {
  animation: fade-in 1000ms;
}

Con le scroll-driven animations, l'avanzamento dei keyframe dipende dalla posizione dello scroll.

Attenzione a una distinzione spesso confusa: scroll-driven non significa scroll-triggered. Un'animazione triggered parte quando l'elemento entra in scena, ma poi prosegue da sola sul tempo. Una scroll-driven è guidata, frame per frame, dallo scroll.

La timeline è la viewport

Il prossimo blocco fa sfumare un elemento da trasparente a opaco man mano che attraversa la viewport, senza un solo listener di scroll:

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.reveal {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry; /* Lo spieghiamo nella prossima slide. */
}

view() chiede al browser di creare una timeline collegata al passaggio dell'elemento dentro la viewport, o dentro il contenitore scrollabile più vicino se l'elemento sta dentro a un overflow: auto.

Quando l'elemento è sotto la viewport, l'animazione è al keyframe 0. Mentre l'elemento sale, l'animazione avanza. Quando ha attraversato la viewport, è al keyframe 100%.

In questo esempio compare già animation-range: entry: lo vediamo in dettaglio nella prossima slide, ma qui serve a limitare il fade alla fase in cui la card entra nel riquadro.

animation-range: la parte di scroll che conta

animation-range controlla quale parte del passaggio nella viewport deve guidare l'animazione. Senza specificarlo, l'animazione copre l'intero attraversamento, cioè cover, che spesso è troppo lungo.

.reveal {
  animation: slide-in linear both;
  animation-timeline: view();
  animation-range: entry;
}

Transizioni tra viste

Le View Transitions permettono al browser di animare il passaggio tra due viste della pagina: due schermate, due rotte, due documenti diversi.

Nei progetti Single Page Application, o SPA, si usa JavaScript con document.startViewTransition(). In questa lezione ci interessa il caso più vicino ai vostri progetti HTML/CSS: una Multi Page Application, o MPA, cioè un sito composto da più file HTML separati.

Con le MPA moderne possiamo abilitare le view transitions interamente in CSS:

@view-transition {
  navigation: auto;
}

Inserendo questa regola in entrambe le pagine, ogni navigazione interna allo stesso sito viene accompagnata da una transizione visiva.

Due pagine, stesso origin

Perché una transizione tra due documenti funzioni, servono condizioni semplici:

• le due pagine devono appartenere allo stesso sito, cioè allo stesso origin;
• entrambe devono dichiarare @view-transition { navigation: auto; };
• la navigazione deve essere normale: un click su un link, un submit, un cambio di hash.

@view-transition {
  navigation: auto;
}

Niente JavaScript obbligatorio per il caso MPA base. Il browser si occupa di tutto.

La vecchia pagina e la nuova pagina

Durante una view transition, il browser crea due pseudo-elementi che rappresentano la vecchia vista (::view-transition-old) e la nuova vista (::view-transition-new). Potete intercettarli con CSS e dare loro animazioni dedicate.

La demo esterna in public/demos/view-transition/ usa proprio questa personalizzazione: due pagine reali, index.html e dettagli.html, condividono lo stesso styles.css. Apritela e navigate tra elenco e dettaglio per vedere il browser applicare il codice qui sotto.

Provate la demo reale

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-out 300ms ease-in both;
}

::view-transition-new(root) {
  animation: page-in 300ms ease-out both;
}

@keyframes page-out {
  to {
    opacity: 0;
    transform: translateY(-16px);
  }
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

In questo esempio, la vecchia pagina sfuma verso l'alto e la nuova pagina entra dal basso. Il risultato è una transizione coerente, verticale, tra le due viste.

Riepilogo