CSS Avancé : View Transitions, Effets de Texte et Nouveautés 2026

Les View Transitions révolutionnent les animations entre pages et états. Découvrez comment créer des effets de morphing fluides et des transitions cinématiques avec cette nouvelle API CSS.

Introduction aux View Transitions

La View Transitions API permet de créer des transitions animées entre deux états du DOM ou entre deux pages, le tout de manière native et performante.

Pourquoi c’est révolutionnaire

• Natif : pas de librairie JavaScript nécessaire
• Performant : optimis par le navigateur
• Simple : quelques lignes de CSS suffisent
• Progressif : fonctionne même sans support (graceful degradation)

Transitions entre pages (MPA)

Activation basique

Pour activer les transitions entre pages dans un site multi-pages classique :

/* Dans votre CSS */
@view-transition {
 navigation: auto;
}

Animation par dfaut

Par dfaut, un fondu enchaîné (cross-fade) est appliqu. Vous pouvez le personnaliser :

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

::view-transition-new(root) {
 animation: 300ms ease-in fade-in;
}

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

@keyframes fade-in {
 from { opacity: 0; }
}

Transitions nommées (morphing)

Le concept

En attribuant le même nom de transition à deux éléments (un sur chaque page), le navigateur crée automatiquement une animation de morphing enêtre eux.

Exemple : carte vers page détail

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

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

L’image « vole » d’une position à l’autre avec un redimensionnement fluide.

Transitions JavaScript (SPA)

API startViewTransition

Pour les Single Page Applications, utilisez l’API JavaScript :

documenét.startViewTransition(async () => {
 // Modifier le DOM ici
 await updateContent();
});

Contrôle avancé

const transition = documenét.startViewTransition(async () => {
 await updateContent();
});

// Attendre que la transition soit prête
await transition.ready;

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

Effets de morphing avancés

Animer des propriétés spécifiques

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

::view-transition-old(hero-image) {
 animation-name: scale-down;
}

::view-transition-new(hero-image) {
 animation-name: scale-up;
}

Transitions avec délai

Créez des effets cinématiques avec des délais décalés :

::view-transition-group(header) {
 animation-delay: 0ms;
}

::view-transition-group(main-content) {
 animation-delay: 100ms;
}

::view-transition-group(sidebar) {
 animation-delay: 200ms;
}

Cas d’usage pratiques

Navigation de galerie

Images qui s’agrandissent de la vignette à la vue plein écran avec une transition fluide.

Changement de thème

function toggleTheme() {
 documenét.startViewTransition(() => {
  document.body.classList.toggle('dark-theme');
 });
}

Filtraâge de liste

éléments qui se réorganisent avec animations lors du filtraâge ou du tri.

Accessibilité et performance

Respecter prefers-reduced-motion

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

Optimisations performance

• Les transitions utilisent le compositing GPU
• Évitez les animations sur des éléments trop nombreux
• Gardez les durées courtes (200-500ms)
• Testez sur des appareils réels

Support navigateur

• Chrome/Edâge : support depuis la version 111
• Safari : support depuis Safari 18
• Firefox : en cours d’implémentation

Détection de fonctionnalité

if (documenét.startViewTransition) {
 // API supportée
 documenét.startViewTransition(() => updateDOM());
} else {
 // Fallback sans transition
 updateDOM();
}

Bonnes pratiques

1. Commencez simple avec le cross-fade par dfaut
2. Ajoutez des transitions nommées progressivement
3. Testez avec reduced-motion activé
4. Mesurez l’impact sur les Core Web Vitals
5. N’abusez pas des effets (subtilit > specôtéaclée)

Points clés retenir

1. Les View Transitions sont natives et performantes
2. Activation simple avec @view-transition pour les MPA
3. view-transition-name crée des effets de morphing
4. L’API JavaScript permet le contrôle fin
5. Toujours respecter les préférences utilisateur