Animazioni con @keyframes, animation e will-change

La proprietà transition è fantastica, ma è limitata: ha bisogno di un “grilletto” (trigger) per partire, come il passaggio del mouse (:hover), e può fare solo un singolo passaggio dal Punto A al Punto B.

Se vuoi che un elemento pulsi continuamente appena carichi la pagina, o faccia un percorso complesso come “Vai a destra, poi in alto, poi diventa invisibile”, hai bisogno delle Animazioni Keyframes.

1. Definire lo script dell’animazione: @keyframes

Come in un vero cartone animato, dobbiamo disegnare i “fotogrammi chiave” (keyframes) della nostra scena.

Si usa la sintassi @keyframes seguita da un nome inventato. All’interno, usiamo le percentuali per indicare la linea temporale: 0% è l’inizio del tempo, 100% è la fine.

@keyframes battito-cuore {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2); /* A metà tempo diventa più grande */
  }
  100% {
    transform: scale(1); /* Alla fine torna normale */
  }
}

(Puoi anche usare le parole chiave from e to invece di 0% e 100% se hai solo due fotogrammi).

2. Applicare l’animazione: animation

Ora che hai scritto lo script, devi assegnarlo a un attore (un elemento HTML) e dirgli quanto tempo impiegare per recitarlo usando la proprietà animation (o le sue singole varianti come animation-name, animation-duration, ecc.).

.cuore-icona {
  /* Nome-animazione | Durata | Easing | Ritardo | Ripetizioni | Direzione */
  animation: battito-cuore 1.5s ease-in-out 0s infinite normal;
}

La parola magica qui è infinite: dice all’elemento di ripetere l’animazione di 1.5 secondi per sempre, creando un battito cardiaco continuo!

3. Ottimizzazione estrema: will-change

Se stai creando un’animazione complessa che gira in loop continuo (come uno sfondo che ruota o un elemento che viaggia in tondo), il browser faticherà per ricalcolare i pixel a schermo per sempre, scaricando la batteria degli smartphone.

Per animazioni critiche e continue, puoi avvisare il browser “in anticipo” che quell’elemento sarà soggetto a forti animazioni. Il browser può preparare un livello separato e gestire meglio proprietà come transform o opacity.

.elemento-animato-complesso {
  animation: rotazione 5s linear infinite;
  
  /* "Ehi Browser, preparati: presto trasformerò pesantemente questo elemento!" */
  will-change: transform; 
}

will-change non rende automaticamente veloce qualunque animazione. Se lo usi su troppi elementi, consumi memoria e puoi peggiorare le prestazioni. Usalo solo su pochi elementi davvero critici e rimuovilo quando non serve più.

Ridurre il movimento

Le animazioni continue possono disturbare alcune persone. Prima di pubblicare, aggiungi una variante per chi ha attivato la preferenza di sistema per ridurre il movimento.

@media (prefers-reduced-motion: reduce) {
  .cuore-icona {
    animation: none;
  }
}

Un’interfaccia curata non è quella che si muove sempre: è quella che comunica stato e gerarchia senza ostacolare chi la usa.