Skip to content

Latest commit

 

History

History
60 lines (42 loc) · 2.29 KB

BP_039_fr.md

File metadata and controls

60 lines (42 loc) · 2.29 KB
Raw

Éviter les animations JavaScript / CSS

Identifiants

GreenIT V2 V3 V4
810 48 39

Catégories

Cycle de vie Tiers Responsable
2. Conception Utilisateur/Terminal UX/UI Designer

Indications

Degré de priorité Mise en oeuvre Impact écologique
4 3 5
Ressources Economisées
Processeur / Mémoire vive

Description

Les animations JavaScript/CSS peuvent être très coûteuses en termes de cycles CPU et de consommation mémoire. Elles déclenchent toutes une action de type (re)paint/(re)flow très coûteuse en ressources. Il faut donc éviter au maximum les animations, et ne les utiliser que lorsqu’elles sont indispensables.

Si vous ne pouvez pas vous passer d’une animation, limitez-vous aux propriétés CSS opacity et transform, et aux fonctions associées translate, rotate, scale de transform. Ces deux propriétés sont automatiquement optimisées par le navigateur, et l’animation peut être prise en charge par le processeur graphique (GPU). Le site www.csstriggers.com liste les actions sur le DOM déclenchées par une animation.

Pour que le navigateur puisse réduire au minimum les ressources consommées par l’animation, vous pouvez le prévenir qu’une animation va avoir lieu grâce à l'instruction will-change.

Pour en savoir plus : https://web.dev/animations-guide/

Exemple

.box {
    will-change: transform, opacity;
}

Solution alternative

Vous pouvez aussi laissez le choix à vos utilisateurs, via les préférences de leurs navigateurs et la media query prefers-reduced-motion, de jouer ou non l'animation. L'animation est jouée seulement si l'utilisateur n'a pas défini de préférence.

@media (prefers-reduced-motion : no-preference ) {
  .animation {
    animation: fadeIn 4s ease;
  }
}

Principe de validation

Le nombre ... est inférieur ou égal à
d'animations JS / CSS par page 2