View Transitions API : des animations natives sans framework

Les transitions entre pages et entre etats de l’interface ont toujours ete le talon d’Achille du web. La ou les applications natives offrent des animations fluides et naturelles entre les ecrans, le web proposait… un ecran blanc pendant le chargement. L’API View Transitions change la donne.

Introduite progressivement dans les navigateurs depuis 2023, l’API View Transitions est desormais mature et largement supportee en 2026. Elle permet de creer des transitions animees entre deux etats du DOM, que ce soit dans une Single Page Application (SPA) ou meme entre deux pages distinctes d’un site multi-pages (MPA).

Comment fonctionne l’API

Le principe est surprenamment simple. Quand vous declenchez une View Transition, le navigateur effectue les etapes suivantes :

1. Il capture un “screenshot” de l’etat actuel du DOM (l’ancien etat).
2. Il applique les changements au DOM (le nouvel etat).
3. Il capture un screenshot du nouvel etat.
4. Il anime la transition entre les deux captures.

Le tout se passe de maniere transparente, sans que vous ayez a gerer manuellement les animations complexes. Le navigateur cree des pseudo-elements (::view-transition-old et ::view-transition-new) qu’il anime avec un crossfade par defaut.

View Transitions dans une SPA

Pour les applications single-page, l’API s’utilise via la methode document.startViewTransition() :

// Transition simple avec crossfade
document.startViewTransition(() => {
  updateContent(newData);
});

// Avec gestion des promesses
const transition = document.startViewTransition(async () => {
  const response = await fetch('/api/page/2');
  const html = await response.text();
  document.querySelector('.content').innerHTML = html;
});

await transition.finished;

Personnaliser les animations avec CSS

Par defaut, la transition est un simple crossfade. Mais vous pouvez personnaliser entierement l’animation avec du CSS :

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root) {
  animation: slide-out-left 0.3s ease-in both;
}

::view-transition-new(root) {
  animation: slide-in-right 0.3s ease-out both;
}

@keyframes slide-out-left {
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
}

Les transitions nommees : le vrai pouvoir

La fonctionnalite la plus impressionnante est la possibilite de nommer des elements pour creer des animations de morphing entre eux :

/* Sur la page liste */
.product-card img {
  view-transition-name: product-image;
}

.product-card h3 {
  view-transition-name: product-title;
}

/* Sur la page detail */
.product-detail img {
  view-transition-name: product-image;
}

.product-detail h1 {
  view-transition-name: product-title;
}

Quand deux elements partagent le meme view-transition-name, le navigateur cree automatiquement une animation de morphing entre eux.

Attention : chaque view-transition-name doit etre unique sur la page au moment de la capture.

View Transitions multi-pages (MPA)

La veritable revolution est le support des View Transitions entre pages distinctes, sans JavaScript cote client :

@view-transition {
  navigation: auto;
}

Avec cette simple declaration, toutes les navigations same-origin beneficient automatiquement d’un crossfade.

Integration avec les frameworks

Les principaux frameworks front-end ont integre le support des View Transitions :

• Astro : support natif via la directive transition:name et transition:animate. La meilleure integration du marche.
• Next.js : support experimental via le composant <ViewTransition>.
• Nuxt : support via le module nuxt-view-transitions.
• SvelteKit : integration native avec onNavigate.

Bonnes pratiques

1. Gardez les transitions courtes : 200 a 400ms maximum.
2. Utilisez prefers-reduced-motion : desactivez les transitions pour les utilisateurs qui le souhaitent.
3. Testez sur des connexions lentes : les transitions MPA dependent du temps de chargement de la nouvelle page.
4. Limitez le nombre d’elements nommes : chaque element nomme necessite une capture separee.
5. Evitez les transitions sur les formulaires : les soumissions de formulaires ne beneficient generalement pas de transitions animees.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Compatibilite en 2026

• SPA View Transitions : Chrome 111+, Edge 111+, Safari 18+, Firefox 133+.
• MPA View Transitions : Chrome 126+, Edge 126+, Safari 18.2+, Firefox 134+.

Conclusion

L’API View Transitions est probablement l’ajout le plus impactant pour l’experience utilisateur sur le web depuis des annees. Elle comble enfin le fosse entre les applications web et natives en matiere de transitions fluides.

Le plus beau : elle est progressive par nature. Vous pouvez l’ajouter a un site existant sans rien casser. Les navigateurs qui ne la supportent pas l’ignorent simplement.