La View Transitions API (CSS) permet des transitions de navigation fluides entre les pages ou les états, sans JavaScript dédié. Le navigateur gère le morphing et les animations entre l'ancien et le nouveau contenu.
On assigne un view-transition-name aux éléments qui doivent être « suivis » d'une vue à l'autre. Le navigateur crée automatiquement une animation entre les deux états. Les transitions cross-document (navigation entre pages) sont supportées avec un peu de config. Pour les SPA et les sites multi-pages, la View Transitions API remplace les librairies de transition (React Router, etc.) par une solution native et performante. Idéal pour les galleries, les listes → détail et les changements de layout.
Conseil : utiliser des noms uniques par « type » d'élément (header, main) pour éviter les conflits.
Points forts / Points faibles
Points forts
- Transitions fluides sans librairie JS
- API déclarative (CSS + noms)
- Performances gérées par le navigateur
- Progressive enhancement (fonctionne sans si non supporté)
Points faibles
- Support navigateurs encore partiel (Chrome, Edge ; Safari en cours)
- Cross-document plus délicat à configurer
- Contrôle fin des keyframes parfois limité