Guide débutant des view-transitions en CSS pour des MPAs fluides

Et si votre site pouvait passer d’une page à l’autre avec une animation élégante, sans ce fameux « flash » de rechargement ? C’est désormais possible grâce à la View Transition API et à la règle CSS @view-transition, qui apportent des transitions de vues natives aux applications multi‑pages. Dans ce guide, nous vous montrons comment utiliser les view-transitions pour créer une navigation plus fluide, du rappel des fondamentaux jusqu’à une première personnalisation.

MPA vs SPA : le rappel essentiel

Sur le web, deux architectures dominent : les multi‑page applications (MPA) et les single‑page applications (SPA). Comprendre leur logique aide à situer la valeur des transitions de vues.

• MPA : chaque clic charge un nouveau document depuis le serveur. C’est simple à mettre en place, idéal pour des sites riches en pages distinctes, mais la navigation provoque un rechargement complet.
• SPA : une seule page HTML est chargée, le contenu est mis à jour côté client via JavaScript. Les interactions semblent plus rapides, mais la gestion du routage et des états devient plus complexe.

Historiquement, les animations de navigation lisses étaient l’apanage des SPA. Les view-transitions changent la donne : elles permettent aux MPAs d’offrir des transitions animées, tout en restant compatibles avec le principe de progressive enhancement. Si le navigateur ne prend pas en charge la fonctionnalité, la navigation standard continue de fonctionner sans casse.

Compatibilité des navigateurs : où en est-on ?

La spécification CSS View Transitions est publiée en deux niveaux, chacun couvrant un périmètre fonctionnel distinct :

• Niveau 1 : transitions au sein d’une même page via la View Transition API. Pris en charge par Chrome, Edge et Safari. Firefox propose un support à partir de la version 144 (actuellement en bêta).
• Niveau 2 : transitions entre plusieurs pages grâce à la règle @view-transition. Pris en charge par Chrome 126+, Edge 126+ et Safari 18.2+. Côté Firefox, le travail est en cours : voir le ticket https://bugzilla.mozilla.org/show_bug.cgi?id=1860854.

Lorsqu’un navigateur ne prend pas en charge les view-transitions, rien ne se brise : la feuille de style est interprétée comme une amélioration optionnelle, et la navigation reste classique. C’est un cas d’école de progressive enhancement.

Première mise en pratique : une transition de vue en une ligne

La beauté de l’approche CSS, c’est sa simplicité. Pour déclencher une transition de vue entre deux pages d’un même site, il suffit d’ajouter une règle dédiée dans vos styles : « @view-transition { navigation: auto; } ». Cette seule déclaration active la gestion des transitions lors de la navigation inter‑pages, sans JavaScript.

Pour bien visualiser l’effet, créez deux documents HTML minimalistes : une page d’accueil (index.html) avec un titre, quelques paragraphes et un lien vers une seconde page, puis une page de détails (hobbies.html) avec un contenu succinct et un lien retour. Appliquez une feuille de style commune et donnez à chaque page une ambiance colorée distincte pour rendre la transition évidente au premier coup d’œil. Une fois la règle @view-transition activée, le passage de l’une à l’autre se fait avec une animation native, sans effort supplémentaire.

Mise en place pas à pas

• Créez index.html avec un titre descriptif, deux courts paragraphes et un lien vers la page hobbies.html.
• Créez hobbies.html avec un titre, deux paragraphes, et un lien de retour vers index.html.
• Ajoutez une feuille de styles commune (typo système, largeur maximale, centrage, interlignage) et une couleur de fond différente par page pour percevoir la transition.
• Dans votre CSS, ajoutez la règle @view-transition et activez la navigation automatique.
• Ouvrez la page d’accueil, cliquez sur le lien : vous voyez une transition fluide entre les deux vues.

Cette approche était autrefois réservée à des frameworks SPA, souvent à grand renfort de JavaScript et d’orchestration d’états. Ici, le navigateur assure l’essentiel du travail.

Aller plus loin : personnaliser la transition

La transition par défaut s’apparente à un fondu croisé. Vous pouvez l’adapter à votre direction artistique et créer, par exemple, un glissement latéral. Pour cela, deux pseudo‑éléments CSS sont au cœur des view-transitions :

• « ::view-transition-old(root) » représente la page que l’on quitte.
• « ::view-transition-new(root) » représente la page que l’on rejoint.

Ces pseudo‑éléments offrent une surface de style dédiée à chaque étape de la navigation. L’idée : définir des animations CSS ciblées sur l’ancienne vue et/ou la nouvelle, afin de contrôler finement l’entrée et la sortie de l’écran.

Exemple guidé : un slide‑in / slide‑out maîtrisé

Supposons que vous souhaitiez faire entrer la seconde page depuis la droite, puis la faire sortir dans la même direction lors du retour. Vous pouvez procéder ainsi :

• Associez une feuille de style spécifique à chaque page (par exemple index.css pour la page d’accueil et hobbies.css pour la seconde). Cela permet d’appliquer des effets directionnels différents à l’aller et au retour.
• Dans le style de la page d’arrivée, ciblez « ::view-transition-new(root) » pour animer son entrée, et neutralisez l’animation de « ::view-transition-old(root) » si nécessaire.
• Dans le style de la page de départ, ciblez « ::view-transition-old(root) » pour animer sa sortie (glissement vers la droite), tandis que « ::view-transition-new(root) » reste statique.
• Définissez des animations de type translation horizontale (par exemple, faire passer la vue de 100vw à 0 pour l’entrée, et de 0 à 100vw pour la sortie) pour simuler un slide fluide.

Un détail important : par défaut, les view-transitions utilisent un mode de fusion « plus‑lighter » qui produit un fondu croisé entre les vues. Pour un glissement net, forcez « mix-blend-mode » à « normal » sur les pseudo‑éléments concernés, afin d’éviter ce fondu et de garder un rendu propre. Vous pouvez aussi ajuster l’empilement (z-index) de la vue sortante pour contrôler l’ordre visuel pendant l’animation.

Notez que rien ne vous oblige à animer les deux pages. Dans l’exemple ci‑dessus, seule la page hobbies.html est animée à l’aller comme au retour, mais vous pouvez chorégraphier les deux côtés si votre direction artistique l’exige.

Bonnes pratiques de design et de performance

Comme toute animation d’interface, une transition réussie doit servir l’expérience utilisateur. Quelques principes à garder en tête :

• Clarté avant tout : la transition doit guider l’œil, pas le distraire. Préférez des durées courtes et des courbes d’accélération naturelles.
• Contexte visuel : donnez des indices sur la direction de la navigation (un slide depuis la droite peut signifier « aller plus loin », depuis la gauche « revenir »).
• Progressive enhancement : l’UX ne doit pas dépendre exclusivement de l’animation. Le contenu reste accessible même sans view-transitions.
• Parcimonie : animez les pages qui en ont besoin. Évitez d’appliquer des effets lourds à chaque navigation sur des sites très denses.

Ressources et démos

Pour explorer davantage, consultez la documentation et les exemples de référence :

• View Transition API : /en-US/docs/Web/API/View_Transition_API
• Spécification CSS View Transitions – Niveau 1 : https://drafts.csswg.org/css-view-transitions-1/
• Spécification CSS View Transitions – Niveau 2 : https://drafts.csswg.org/css-view-transitions-2/
• Démo MPA : https://mdn.github.io/dom-examples/view-transitions/mpa-homepage/
• Code source de la démo : https://github.com/mdn/dom-examples/tree/main/view-transitions/mpa-homepage
• Chrome 142 beta : https://www.edev-multimedia.com/chrome-142-beta-nouveautes-frontend

En résumé

Les view-transitions apportent enfin aux MPAs ce que les SPA monopolisaient depuis des années : des transitions de navigation fluides, expressives et performantes. Avec une simple règle CSS, vous débloquez un fondu croisé par défaut ; avec quelques sélecteurs et animations bien pensées, vous composez des mouvements sur‑mesure – du slide latéral à des chorégraphies plus ambitieuses.

Cerise sur le gâteau, l’approche respecte parfaitement le progressive enhancement : sur les navigateurs compatibles, vos pages gagnent en fluidité ; ailleurs, l’expérience reste pleinement fonctionnelle. Lancez‑vous, expérimentez, et faites de la navigation un moment de design à part entière.