View transitions : des transitions de page fluides en CSS

Sur un site classique, passer d'une page à l'autre provoque un écran blanc furtif suivi de l'affichage brutal de la nouvelle page. Les applications mobiles, elles, enchaînent les écrans avec des transitions fluides qui aident à comprendre où l'on va. Pendant longtemps, reproduire cet effet sur le web imposait de transformer son site en application JavaScript. Les view transitions changent la donne : quelques lignes de CSS suffisent désormais pour animer la navigation entre deux pages d'un site traditionnel.

Le principe des view transitions

Lors d'un changement d'état ou de page, le navigateur :

1. prend une capture de l'état actuel ;
2. affiche le nouvel état ;
3. anime le passage de l'un à l'autre, par défaut avec un fondu enchaîné.

La force du mécanisme est qu'on peut nommer des éléments présents dans les deux états : le navigateur anime alors leur position et leur taille. Une vignette d'article peut ainsi « s'agrandir » pour devenir l'image principale de la page de l'article.

Il existe deux variantes :

• Les transitions au sein d'une même page, déclenchées en JavaScript, utiles pour un filtre, un onglet ou une application monopage ;
• Les transitions entre documents, qui s'appliquent à la navigation classique entre deux pages d'un même site, sans aucun JavaScript.

Activer les transitions entre pages en une règle CSS

Pour un site multipage, la règle suivante, présente sur la page de départ et sur la page d'arrivée, active la transition :

@view-transition {
  navigation: auto;
}

C'est tout. Les deux pages doivent appartenir à la même origine (même domaine, même protocole). Le visiteur voit désormais un fondu enchaîné entre les pages au lieu d'un clignotement.

Animer des éléments partagés

Pour qu'un élément se transforme d'une page à l'autre, on lui donne le même nom de transition des deux côtés :

/* Sur la liste des articles */
.card-image--article-42 {
  view-transition-name: article-42-image;
}

/* Sur la page de l'article */
.article-hero-image {
  view-transition-name: article-42-image;
}

Chaque nom doit être unique dans la page. Sur une liste générée dynamiquement, on l'injecte en général dans un attribut style depuis le gabarit, par exemple style="view-transition-name: article-{{ article.id }}".

Personnaliser l'animation

Le navigateur crée des pseudo-éléments que l'on peut styliser comme n'importe quelle animation CSS :

::view-transition-old(root) {
  animation: 180ms ease-out both fade-out;
}

::view-transition-new(root) {
  animation: 240ms ease-out both slide-in;
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(12px); }
}

Gardez des durées courtes : entre 150 et 300 millisecondes. Au-delà, la transition donne l'impression que le site est lent, ce qui va à l'encontre du but recherché. Les principes de mon article sur les micro-interactions s'appliquent ici aussi.

Les transitions au sein d'une même page

Pour un changement d'état en JavaScript, on enveloppe la mise à jour du DOM dans document.startViewTransition() :

function showTab(tab) {
  const update = () => {
    document.querySelector('.tab-panel.is-active')?.classList.remove('is-active');
    tab.classList.add('is-active');
  };

  if (!document.startViewTransition) {
    update();               // navigateur sans prise en charge : changement immédiat
    return;
  }

  document.startViewTransition(update);
}

Le repli est intégré : si l'API n'existe pas, le contenu change simplement sans animation.

Respecter les préférences des visiteurs

Certaines personnes sont gênées, voire incommodées, par les animations de mouvement. Le système d'exploitation permet de demander une réduction des animations, et le site doit respecter ce choix :

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

C'est une exigence d'accessibilité, pas une option.

Compatibilité navigateurs

Les transitions au sein d'une même page sont prises en charge par tous les navigateurs majeurs depuis l'arrivée de Firefox 144 en octobre 2025, comme l'annonce web.dev. Les transitions entre documents fonctionnent dans Chrome et Edge depuis la version 126 et dans Safari depuis la version 18.2 ; la prise en charge de Firefox est encore en cours, selon Can I use.

Ce n'est pas un problème : les view transitions sont une amélioration progressive. Un navigateur qui ne les connaît pas ignore simplement la règle et affiche la navigation habituelle. Rien ne casse.

Performance : pas d'impact négatif

Les view transitions n'ajoutent aucun script à télécharger et l'animation est gérée par le navigateur. Combinées aux Speculation Rules, qui préchargent la page suivante, elles donnent une navigation qui ressemble à celle d'une application native, sans le poids d'un framework. Une transition reste toutefois un habillage : si la page suivante met deux secondes à arriver, l'animation ne fera que souligner l'attente.

Mon conseil pour démarrer

Commencez par la règle @view-transition { navigation: auto; } et un fondu discret : c'est sans risque et immédiatement agréable. Ajoutez ensuite un ou deux éléments partagés là où ils ont du sens, par exemple entre une liste de réalisations et leur fiche détaillée. Si vous voulez donner plus de fluidité à votre site sans sacrifier les performances, parlons de votre projet via la page contact.