Créer des animations CSS hautes performances

Kayce Basques

Rachel Andrew

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

Pour comprendre la théorie qui sous-tend ces recommandations, consultez Pourquoi certaines animations sont-elles lentes ?

Compatibilité du navigateur

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

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

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 les é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;
  }
}

Remarque : Vous trouverez des exemples de copier-coller de différentes animations sur Animista.

Évitez les propriétés qui déclenchent la mise en page ou la peinture

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 une mise en page ou un rendu, sauf si c'est absolument nécessaire.

Avertissement : Si vous devez utiliser une propriété qui déclenche la mise en page ou la peinture, vous ne pourrez probablement pas maintenir l'animation fluide ou performante.

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 redessiner sans avoir à redessiner 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 d'un calque 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.

Attention : La création de calques pouvant entraîner d'autres problèmes de performances, nous vous déconseillons de l'utiliser au début de votre processus d'optimisation. Utilisez-le uniquement si vous remarquez des problèmes graphiques et pensez que la promotion d'un élément vers un nouveau calque peut aider.

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 cet attribut 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 souvent, appliquez will-change à l'aide de JavaScript lorsqu'un changement est susceptible de se produire. Assurez-vous de laisser suffisamment de temps au navigateur pour effectuer les optimisations nécessaires, puis supprimez la propriété une fois que la modification a cessé.

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

Déboguer les animations lentes ou saccadées

Les outils de développement Chrome et Firefox peuvent vous aider à comprendre pourquoi vos animations sont lentes ou saccadées.

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

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

À éviter

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

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

À faire

.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 Performances.
2. Enregistrez les performances d'exécution pendant l'animation.
3. Examinez l'onglet Récapitulatif.

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.

L'exemple animation-with-top-left entraîne un travail de rendu.

L'exemple animation-with-transform n'entraîne pas de travail de rendu.

Outils de développement Firefox

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

1. Ouvrez le panneau Performances.
2. Commencez à enregistrer les performances pendant l'animation.
3. Arrêtez l'enregistrement et examinez l'onglet Cascade.

Si vous voyez des entrées pour 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 d'images

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 votre animation.

Faites attention au libellé Frames (Images) en haut de l'interface utilisateur du compteur de FPS. Les valeurs affichées sont par exemple 50% 1 (938 m) dropped of 1878. Une animation très 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.

L'exemple animation-with-top-left entraîne la perte de 50% des frames.

L'exemple animation-with-transform n'entraîne la perte que de 1% des frames.

Vérifier si une animation déclenche la peinture

Certaines propriétés sont plus coûteuses à peindre pour le navigateur que d'autres. 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 à la peinture.

Outils pour les développeurs Chrome

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

Dans cet exemple de Google Maps, vous pouvez voir les éléments qui sont redessinés.

Si vous voyez l'écran entier clignoter ou des zones mises en évidence qui ne devraient pas changer, examinez le problème plus en détail.

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

Outils de développement Firefox

1. Ouvrez Paramètres et ajoutez un bouton "Boîte à outils" pour Activer/Désactiver le clignotement de la peinture.
2. Sur la page que vous souhaitez inspecter, activez le bouton et déplacez votre souris ou faites défiler la page pour voir les zones mises en évidence.

Animer au niveau de la composition

Dans la mesure du possible, limitez les animations à opacity et transform pour les conserver dans la phase 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.