Comment animer une transition de mode sombre avec fluidité
Découvrez comment animer le basculement entre thèmes clair et sombre : éviter le piège de transition: all, révélation circulaire avec la View Transitions API et prévention des flashs.
À retenir
Animer le mode sombre exige d'équilibrer douceur visuelle et performance. Évitez absolument transition: all * en CSS, car cela force le recalcul des styles de chaque élément et provoque de sévères saccades. Utilisez plutôt la View Transitions API pour une révélation circulaire centrée sur le bouton d'activation, ou limitez les transitions CSS aux variables de couleur avec une durée de 200 à 300 ms.
Le piège de transition: all sur l'ensemble du DOM
Appliquer transition: all 0.3s à tous les éléments (*) force le moteur à recalculer dimensions, ombres, polices et bordures sur des milliers de nœuds simultanément. Sur des pages complexes, la chute de framerate est immédiate. Limitez la transition aux variables CSS de fond et de couleur sur l'élément racine.
La révélation circulaire avec la View Transitions API
Les navigateurs modernes prennent en charge document.startViewTransition(). Cette API permet d'animer un masque circulaire clip-path qui s'étend à partir du bouton cliqué par l'utilisateur, dévoilant le nouveau thème comme une onde élégante.
- Ne faites jamais transiter des propriétés qui redéfinissent la mise en page
- Employez document.startViewTransition() avec clip-path circulaire
- Stockez le choix dans localStorage et appliquez la classe avant le rendu
- Maintenez une durée entre 250 et 350 ms pour ne pas ralentir la lecture
Éviter le flash de thème non stylisé (FOUC)
Si l'utilisateur a configuré le mode sombre dans son système ou dans ses préférences de session, appliquez la classe de thème dans un script bloquant synchrone placé dans le <head> avant d'afficher le <body>, afin d'éliminer tout éclair blanc indésirable.
Accessibilité et photosensibilité
Les transitions contrastées soudaines peuvent indisposer les personnes sensibles à la lumière. Si l'utilisateur demande prefers-reduced-motion, changez le thème instantanément sans balayage circulaire ni transition prolongée.
Extrait d’implémentation en production
/* View Transitions API circular reveal */
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-new(root) {
animation: reveal-theme 400ms ease-out;
}
@keyframes reveal-theme {
from { clip-path: circle(0% at var(--click-x) var(--click-y)); }
to { clip-path: circle(150% at var(--click-x) var(--click-y)); }
}Principes clés à retenir
- N'appliquez jamais transition: all globalement sur le DOM
- Mettez en œuvre la View Transitions API pour un effet circulaire fluide
- Activez le thème sauvegardé dans le head pour bloquer les flashs blancs
- Passez au thème instantanément sous mouvement réduit
Questions fréquentes
Sources
- View Transitions API — W3C
- Smooth theme transitions with View Transitions — Chrome Developers