Animazioni CSS con keyframe in React

Una regola @keyframes descrive un'animazione a più passaggi indicando i valori delle proprietà in punti della linea temporale, usando from/to o percentuali come 0%, 50%, 100%.

A differenza delle transizioni, i keyframe possono descrivere movimenti complessi articolati in più fasi, eseguiti autonomamente senza un cambio di stato a ogni passaggio.

Si applica un insieme di keyframe con la proprietà animation: animation: slideIn 400ms ease forwards. Questa proprietà riunisce il nome, la durata, la funzione di temporizzazione e la modalità di riempimento.

La modalità di riempimento forwards mantiene l'elemento sui valori del keyframe finale dopo la conclusione dell'animazione, impedendo che torni bruscamente all'inizio.

In React in genere si aggiunge una classe che contiene la dichiarazione animation quando lo stato diventa true. Ad esempio, aggiungere is-entering avvia i keyframe nel momento in cui l'elemento viene montato o cambia un flag.

In questo modo la logica dell'animazione resta in CSS, mentre React decide semplicemente quando aggiungere la classe.

animation-fill-mode controlla quali stili si applicano prima e dopo l'esecuzione dell'animazione. forwards conserva l'ultimo keyframe, backwards applica il primo durante un eventuale ritardo e both fa entrambe le cose.

Senza forwards, un elemento animato verso uno stato con dissolvenza in entrata tornerebbe invisibile al termine dell'animazione.

animation-direction: alternate riproduce l'animazione prima in avanti e poi all'indietro a ogni iterazione. In combinazione con animation-iteration-count: infinite, crea un movimento fluido avanti e indietro, simile a un effetto pulsante o di respirazione.

È utile per gli indicatori di caricamento o per movimenti discreti che attirano l'attenzione.

animation-play-state può essere running o paused. È possibile controllarlo tramite lo stato di React, ad esempio mettendo in pausa un marquee al passaggio del mouse cambiando una classe.

Poiché viene messa in pausa anziché reimpostata, l'animazione riprende esattamente dal punto in cui si è fermata.

Un'animazione basata su keyframe viene eseguita una sola volta quando la sua classe viene applicata per la prima volta; aggiungere di nuovo la stessa classe non la riavvia. Il modo più semplice in React consiste nel cambiare la key dell'elemento, così React monta nuovamente un nodo nuovo e riproduce l'animazione dall'inizio.

Ad esempio, key={count} su un toast lo fa montare nuovamente ogni volta che count viene incrementato.

Alcuni utenti abilitano la riduzione del movimento nel sistema operativo per comfort o accessibilità. Racchiuda le animazioni non essenziali in @media (prefers-reduced-motion: reduce) e lì le disabiliti o ne riduca la durata.

Rispettare questa preferenza rende l'interfaccia più inclusiva e aiuta a evitare di provocare disagio.

Per animare gli elementi quando entrano nell'area visibile, usi un IntersectionObserver in un useEffect. Quando l'elemento osservato diventa visibile, aggiorni lo stato, che aggiunge la classe di animazione.

Questo produce effetti di comparsa allo scorrimento senza listener di scroll pesanti in esecuzione a ogni frame.

animation-delay sfalsa il momento in cui inizia ogni animazione con keyframe. Assegnando ritardi crescenti a un elenco di elementi, questi vengono animati in sequenza per una comparsa orchestrata.

In React è possibile calcolare il ritardo per ogni elemento con style={{ animationDelay: i * 80 + 'ms' }}.

Usi le transizioni per semplici cambiamenti a due stati guidati dall'interazione e i keyframe quando servono movimenti a più fasi, loop o un'animazione indipendente da un cambio di stato.

Entrambe sono puro CSS, quindi React decide solo quando applicare le classi e il browser gestisce i frame.

Verifichi la sua comprensione del comportamento dei keyframe.

Ha imparato a definire @keyframes, ad applicarli con la forma abbreviata animation, a controllare la modalità di riempimento e la direzione, a mettere in pausa e riattivare le animazioni e a mostrare gli elementi allo scorrimento con IntersectionObserver.

Ha anche visto come rispettare prefers-reduced-motion per ottenere animazioni accessibili.