Transitions CSS ou JS

Les transitions personnalisées retournent soit une fonction css (GPU), soit une fonction tick pilotée par JS à chaque image.

Pour les transformations, l’opacité, la couleur et tout ce que CSS peut animer. CSS s’exécute sur le compositeur à 60 images par seconde.

Pour les changements de texte, les pixels d’un canevas ou d’autres propriétés que CSS ne gère pas.

La mise à jour par image s’exécute à chaque image d’animation en JS. Elle est plus coûteuse que CSS.

Certaines transitions peuvent utiliser CSS pour le rendu visuel et une mise à jour par image pour des modifications occasionnelles que CSS ne gère pas.

Les animations CSS sont universellement prises en charge ; la mise à jour par image est toujours disponible puisqu’elle repose sur JS.

Les deux méthodes respectent prefers-reduced-motion si vous le vérifiez dans votre transition.

Utilisez l’onglet Performances pour comparer les implémentations CSS et par mise à jour d’image.

Si CSS ne permet pas d’obtenir l’effet souhaité, utilisez élégamment la mise à jour par image en solution de repli.

Plusieurs éléments avec des transitions différentes peuvent mélanger CSS et mise à jour par image dans une même vue.

Par défaut, utilisez CSS. Ne recourez à la mise à jour par image que lorsque CSS ne peut réellement pas exprimer l’animation.

Choisissez CSS pour les transitions accélérées par GPU ; réservez la mise à jour par image aux animations que CSS ne peut pas gérer, comme les changements de texte ou de canevas.