@view-transition – La svolta delle animazioni CSS

Ecco un articolo chiaro e dettagliato per spiegare cos’è e come funziona @view-transition includendo anche i metodi alternativi per creare transizioni tra le pagine di un sito web.

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

Cos’è `@view-transition`

È una regola CSS introdotta dall’API View Transition, che abilita automaticamente una transizione visiva quando l’utente naviga tra due pagine dello stesso dominio (Multi-Page App, MPA).

Inserendola nel CSS di entrambe le pagine, la navigazione si arricchisce di un’animazione intermedia, rendendo il passaggio più fluido e meno brusco. (developer.mozilla.org, debugbear.com, developer.chrome.com).

Vantaggi principali:

Aggiunge una transizione elegante (di default un cross-fade) tra pagine con una sola riga di CSS, senza il bisogno di JavaScript.
Migliora la percezione della performance e l’esperienza utente: la continuità visiva aiuta a mantenere il contesto e riduce il senso di attesa.

Come funziona

L’API segue un processo strutturato:

L’utente clicca su un link che punta a una pagina dello stesso dominio.
Se entrambe le pagine contengono:
```
@view-transition {
  navigation: auto;
}
```
viene automaticamente avviata una transizione visiva. (developer.mozilla.org, developer.chrome.com)
Il browser cattura snapshot del vecchio e del nuovo stato della pagina.

Viene creata una gerarchia di pseudo-elementi:

::view-transition
└─ ::view-transition-group(root)
    └─ ::view-transition-image-pair(root)
        ├─ ::view-transition-old(root)
        └─ ::view-transition-new(root)

L’animazione predefinita è un cross-fade: il vecchio stato svanisce, il nuovo appare; ma può essere interamente personalizzata con CSS. (developer.mozilla.org, developer.chrome.com, freecodecamp.org)

Personalizzazioni possibili:

Animazioni personalizzate con ::view-transition-old() e ::view-transition-new() (es. modificare durata, timing, direzione)
Transizioni mirate a elementi specifici usando view-transition-name, consentendo effetti come “morphing” tra elementi corrispondenti nelle due pagine
Utilizzo di view-transition-class per applicare stili comuni a più elementi senza doverli nominare uno per uno (developer.chrome.com)
Tipi di transizione (types) per differenziare animazioni in base al contesto (es. avanti vs indietro) (developer.chrome.com)

Occhio al supporto

Idealmente, tutte le istruzioni elencate dovrebbero mostrare transizioni visive tra pagine. Tuttavia, nei browser attuali che non supportano l’API di navigazione o delle View Transitions MPA, l’effetto risulta disabilitato o parziale.

Conclusione e suggerimenti per l’uso

Caso d’uso	Setup minimo	Outcome
MPA semplice	Aggiungere `@view-transition` in CSS globale	Navigazioni cross-fade fluide e progressive
Migliorare esperienza	Usare `view-transition-name` e pseudo-elementi CSS per “morph” e animazioni su specifici elementi	Transizioni visivamente intelligenti e coinvolgenti
SPA (single-page app)	Usare `document.startViewTransition()` per aggiornamenti DOM dinamici	Transizioni integrate per interazioni in-page

Raccomandazioni:

Testare l’API su Chrome 126+ (Cross-Document) o Chrome 111+ (Same-Document) per verificare il comportamento attuale nei browser.
Per siti MPA statici, l’uso di questa API è una soluzione elegante e leggera per trasformare la navigazione — senza overhead di JavaScript — in un’esperienza elegante e fluida.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog