JavaScript UX

View Transitions API : des animations natives sans framework

14 mars 2026 · 11 min de lecture · JavaScript

Les transitions entre pages et entre états de l'interface ont toujours été le talon d'Achille du web. Là où les applications natives offrent des animations fluides et naturelles entre les écrans, le web proposait... un écran blanc pendant le chargement. L'API View Transitions change la donne.

Introduite progressivement dans les navigateurs depuis 2023, l'API View Transitions est désormais mature et largement supportée en 2026. Elle permet de créer des transitions animées entre deux états du DOM, que ce soit dans une Single Page Application (SPA) ou même entre deux pages distinctes d'un site multi-pages (MPA).

Comment fonctionne l'API

Le principe est surprenamment simple. Quand vous déclenchez une View Transition, le navigateur effectue les étapes suivantes :

  1. Il capture un "screenshot" de l'état actuel du DOM (l'ancien état).
  2. Il applique les changements au DOM (le nouvel état).
  3. Il capture un screenshot du nouvel état.
  4. Il anime la transition entre les deux captures.

Le tout se passe de manière transparente, sans que vous ayez à gérer manuellement les animations complexes. Le navigateur crée des pseudo-éléments (::view-transition-old et ::view-transition-new) qu'il anime avec un crossfade par défaut.

View Transitions dans une SPA

Pour les applications single-page, l'API s'utilise via la méthode document.startViewTransition() :

// Transition simple avec crossfade
document.startViewTransition(() => {
  // Mettez à jour le DOM ici
  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;
});

// Attendre que la transition soit terminée
await transition.finished;

C'est tout ce qu'il faut pour obtenir un crossfade animé entre l'ancien et le nouveau contenu. Mais la vraie puissance de l'API réside dans la personnalisation des animations.

Personnaliser les animations avec CSS

Par défaut, la transition est un simple crossfade. Mais vous pouvez personnaliser entièrement l'animation avec du CSS :

/* Modifier la durée et l'easing par défaut */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide de droite à gauche */
::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 nommées : le vrai pouvoir

La fonctionnalité la plus impressionnante est la possibilité de nommer des éléments pour créer des animations de morphing entre eux. C'est ce qui permet de reproduire les animations "shared element" des apps natives.

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

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

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

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

Quand deux éléments partagent le même view-transition-name, le navigateur crée automatiquement une animation de morphing entre eux. L'image du produit dans la liste "vole" vers sa position sur la page de détail, avec une interpolation fluide de la taille et de la position.

Attention : chaque view-transition-name doit être unique sur la page au moment de la capture. Deux éléments visibles ne peuvent pas partager le même nom simultanément.

Noms dynamiques avec CSS

Pour les listes d'éléments, vous pouvez générer des noms dynamiques :

/* Avec des custom properties */
.card {
  view-transition-name: var(--card-name);
}

/* En JavaScript */
cards.forEach((card, i) => {
  card.style.setProperty('--card-name', `card-${i}`);
});

View Transitions multi-pages (MPA)

La véritable révolution est le support des View Transitions entre pages distinctes, sans JavaScript côté client. Il suffit d'activer la fonctionnalité via une balise meta ou du CSS :

/* Méthode CSS (recommandée) */
@view-transition {
  navigation: auto;
}

/* Ou via la balise meta dans le HTML */
<meta name="view-transition" content="same-origin">

Avec cette simple déclaration, toutes les navigations same-origin bénéficient automatiquement d'un crossfade. Et vous pouvez toujours personnaliser les animations avec CSS et utiliser des view-transition-name pour des animations de morphing entre pages.

Conditions et restrictions

Gérer les types de navigation

En 2026, la spécification Level 2 permet de différencier les types de navigation pour appliquer des animations différentes :

/* Navigation "forward" (clic sur un lien) */
@view-transition {
  navigation: auto;
  types: slide-forward;
}

/* Personnaliser selon le type */
html:active-view-transition-type(slide-forward) {
  &::view-transition-old(root) {
    animation: slide-out-left 0.3s ease;
  }
  &::view-transition-new(root) {
    animation: slide-in-right 0.3s ease;
  }
}

html:active-view-transition-type(slide-back) {
  &::view-transition-old(root) {
    animation: slide-out-right 0.3s ease;
  }
  &::view-transition-new(root) {
    animation: slide-in-left 0.3s ease;
  }
}

Intégration avec les frameworks

Les principaux frameworks front-end ont intégré le support des View Transitions :

// Exemple avec Astro
---
import Layout from '../layouts/Layout.astro';
---

<Layout>
  <img
    src="/product.jpg"
    transition:name="hero-image"
    transition:animate="fade"
  />
  <h1 transition:name="page-title">Mon produit</h1>
</Layout>

Bonnes pratiques

  1. Gardez les transitions courtes : 200 à 400ms maximum. Au-delà, elles ralentissent l'expérience au lieu de l'améliorer.
  2. Utilisez prefers-reduced-motion : désactivez les transitions pour les utilisateurs qui le souhaitent.
  3. Testez sur des connexions lentes : les transitions MPA dépendent du temps de chargement de la nouvelle page. Utilisez un fallback si la page met trop de temps.
  4. Limitez le nombre d'éléments nommés : chaque élément nommé nécessite une capture séparée. Trop d'éléments peuvent dégrader les performances.
  5. Évitez les transitions sur les formulaires : les soumissions de formulaires et les actions de modification ne bénéficient généralement pas de transitions animées.
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Débogage

Chrome DevTools offre un excellent support pour déboguer les View Transitions :

Compatibilité en 2026

Le support navigateur est désormais excellent :

Pour les navigateurs non supportés, la transition est simplement ignorée. Le contenu se met à jour normalement, sans animation. C'est un fallback parfaitement acceptable.

Conclusion

L'API View Transitions est probablement l'ajout le plus impactant pour l'expérience utilisateur sur le web depuis des années. Elle comble enfin le fossé entre les applications web et natives en matière de transitions fluides.

Le plus beau : elle est progressive par nature. Vous pouvez l'ajouter à un site existant sans rien casser. Les navigateurs qui ne la supportent pas l'ignorent simplement. Et avec quelques lignes de CSS, vous pouvez transformer l'expérience de navigation de votre site. Il n'y a plus d'excuse pour des transitions brutales entre pages.

Retour au journal
Restez informé

Recevez le digest hebdomadaire.

Un email par semaine. Le meilleur du web design et du développement. Zéro spam, désabonnement en un clic.