Créer des animations CSS hautes performances

Kayce Basques

Rachel Andrew Technical Writer

Ce guide vous explique comment créer des animations CSS hautes performances.

Consultez Pourquoi certaines animations sont-elles lentes ? pour comprendre la théorie derrière ces recommandations.

Compatibilité du navigateur

Toutes les propriétés CSS recommandées dans ce guide sont compatibles avec les différents navigateurs.

transform

opacity

will-change

Déplacer un élément

Pour déplacer un élément, utilisez les valeurs de mot clé translate ou rotation de la propriété transform.

Par exemple, pour faire glisser un élément dans la vue, utilisez translate.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

Utilisez rotate pour faire pivoter des éléments. L'exemple suivant fait pivoter un élément de 360 degrés.

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Redimensionner un élément

Pour redimensionner un élément, utilisez la valeur de mot clé scale de la propriété transform.

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

Modifier la visibilité d'un élément

Pour afficher ou masquer un élément, utilisez opacity.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Éviter les propriétés qui déclenchent la mise en page ou l'affichage

Avant d'utiliser une propriété CSS pour l'animation (autre que transform et opacity), déterminez l'impact de la propriété sur le pipeline de rendu. Évitez toute propriété qui déclenche la mise en page ou l'affichage, sauf si cela est absolument nécessaire.

Forcer la création de calques

Comme expliqué dans Pourquoi certaines animations sont-elles lentes ?, placer des éléments sur un nouveau calque permet au navigateur de les repeindre sans avoir à repeindre le reste de la mise en page.

Les navigateurs peuvent généralement prendre de bonnes décisions concernant les éléments à placer sur un nouveau calque, mais vous pouvez forcer manuellement la création de calques avec la propriété will-change. Comme son nom l'indique, cette propriété indique au navigateur que cet élément va être modifié d'une manière ou d'une autre.

En CSS, vous pouvez appliquer will-change à n'importe quel sélecteur :

body > .sidebar {
  will-change: transform;
}

Toutefois, la spécification suggère de n'ajouter cette propriété qu'aux éléments qui sont toujours sur le point de changer. Par exemple, cela peut être utilisé pour une barre latérale que l'utilisateur peut faire glisser vers l'intérieur et l'extérieur. Si l'élément ne change pas fréquemment, appliquez will-change à l'aide de JavaScript lorsqu'un changement est susceptible de se produire. Veillez à laisser au navigateur suffisamment de temps pour effectuer les optimisations nécessaires, puis supprimez la propriété une fois la modification terminée.

Pour forcer la création de calques dans un navigateur non compatible avec will-change, vous pouvez définir transform: translateZ(0).

Déboguer des animations lentes ou instables

Les Outils pour les développeurs Chrome et Firefox peuvent vous aider à comprendre pourquoi vos animations sont lentes ou instables.

Vérifier si une animation déclenche la mise en page

Une animation qui déplace un élément à l'aide d'un élément autre que transform est susceptible d'être lente. L'exemple suivant compare une animation utilisant transform à une animation utilisant top et left.

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

Vous pouvez tester cela dans les deux exemples suivants et explorer les performances à l'aide des outils de développement.

• Avant, avec l'animation top et left.
• Après, avec transform.

Outils pour les développeurs Chrome

1. Ouvrez le panneau Performance.
2. Enregistrez les performances d'exécution pendant l'animation.
3. Inspectez l'onglet Résumé.

Si vous voyez une valeur non nulle pour Rendu dans l'onglet Résumé, cela peut signifier que votre animation oblige le navigateur à effectuer un travail de mise en page.

Outils de développement Firefox

Dans les outils de développement Firefox, l'affichage en cascade peut vous aider à comprendre où le navigateur passe du temps.

1. Ouvrez le panneau Performance.
2. Commencez à enregistrer les performances pendant l'animation.
3. Arrêtez l'enregistrement et inspectez l'onglet Waterfall (Cascade).

Si vous voyez des entrées pour Recalculate Style (Recalculer le style), cela signifie que le navigateur doit revenir au début de la cascade de rendu pour afficher l'animation.

Vérifier les pertes de frames

1. Ouvrez l'onglet Rendu dans les outils pour les développeurs Chrome.
2. Cochez la case Compteur de FPS.
3. Observez les valeurs pendant l'exécution de l'animation.

Notez l'étiquette Frames (Images) en haut de l'interface utilisateur du compteur de FPS. Cela affiche des valeurs telles que 50% 1 (938 m) dropped of 1878. Une animation performante présente un pourcentage élevé, par exemple 99%, ce qui signifie que peu de frames sont supprimées et que l'animation est fluide.

Vérifier si une animation déclenche l'affichage

Certaines propriétés sont plus coûteuses à afficher que d'autres pour le navigateur. Par exemple, tout ce qui implique un flou (comme une ombre, par exemple) prend plus de temps à peindre que le dessin d'une boîte rouge. Ces différences ne sont pas toujours évidentes dans le CSS, mais les outils de développement du navigateur peuvent vous aider à identifier les zones à repeindre, ainsi que d'autres problèmes de performances liés à l'affichage.

Outils pour les développeurs Chrome

1. Ouvrez l'onglet Rendu dans les outils pour les développeurs Chrome.
2. Sélectionnez Clignotement de la peinture.
3. Déplacez le pointeur sur l'écran.

Si vous voyez l'écran entier clignoter ou des zones mises en surbrillance qui ne devraient pas changer, examinez-les de plus près.

Si vous devez déterminer si une propriété particulière est à l'origine de problèmes de performances liés à l'affichage, le profileur d'affichage des outils pour les développeurs Chrome peut vous aider.

Outils de développement Firefox

1. Ouvrez Settings (Paramètres) et ajoutez un bouton de boîte à outils pour Toggle paint flashing (Activer/Désactiver le clignotement de la peinture).
2. Sur la page que vous souhaitez inspecter, activez le bouton, puis déplacez votre souris ou faites défiler la page pour voir les zones mises en surbrillance.

Animer au niveau de la composition

Dans la mesure du possible, limitez les animations à opacity et transform pour les maintenir à l'étape de composition du chemin de rendu. Utilisez les outils de développement pour vérifier quelle étape du chemin est affectée par vos animations.

Utilisez le profileur de peinture pour voir si des opérations de peinture sont particulièrement coûteuses. Si vous en trouvez, vérifiez si une autre propriété CSS donne la même apparence avec de meilleures performances.

Utilisez la propriété will-change avec parcimonie et uniquement si vous rencontrez un problème de performances.