Créer des animations CSS hautes performances

Kayce Basques

Rachel Andrew

Ce guide vous explique comment créer des animations CSS très performantes.

Consultez la section Pourquoi certaines animations sont-elles lentes ? pour découvrir la théorie sous-jacente de ces recommandations.

Compatibilité du navigateur

Toutes les propriétés CSS recommandées dans ce guide sont compatibles avec plusieurs 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 vers 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 à 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 du 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 (autres 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 du calque

Comme expliqué dans la section Pourquoi certaines animations sont-elles lentes ?, le fait de 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 sur les éléments à placer sur une nouvelle couche, 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 sera 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;
}

Cependant, la spécification suggère que vous ne devez effectuer cette opération que pour les éléments qui sont toujours sur le point de changer. Par exemple, cela peut être le cas pour une barre latérale que l'utilisateur peut faire glisser vers l'intérieur et l'extérieur. Pour les éléments qui ne changent pas souvent, nous vous recommandons d'appliquer will-change à l'aide de JavaScript lorsqu'une modification est susceptible de se produire. Veillez à laisser au navigateur suffisamment de temps pour effectuer les optimisations nécessaires et supprimez la propriété une fois la modification arrêtée.

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

Déboguer les animations lentes ou irrégulières

Les outils pour les développeurs Chrome et Firefox disposent de nombreux outils pour vous aider à comprendre pourquoi vos animations sont lentes ou irrégulières.

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

Une animation qui déplace un élément avec autre chose que transform risque 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 de Glitch suivants et explorer les performances à l'aide des outils de développement.

• Avant :
• Après :

Outils pour les développeurs Chrome

1. Ouvrez le panneau Performances.
2. Enregistrez les performances d'exécution pendant la durée de votre animation.
3. Inspectez l'onglet Summary (Résumé).

Si vous voyez une valeur non nulle pour Rendering (Rendu) dans l'onglet Summary (Résumé), cela peut signifier que votre animation fait fonctionner la mise en page du navigateur.

Outils pour les développeurs Firefox

Dans les outils pour les développeurs Firefox, la page Waterfall peut vous aider à comprendre où le navigateur passe du temps.

1. Ouvrez le panneau Performances.
2. Commencez à enregistrer les performances pendant que votre animation est en cours.
3. Arrêtez l'enregistrement et inspectez l'onglet Waterfall (Cascade d'annonces).

Si vous voyez des entrées 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 FPS-Meter.
3. Observez les valeurs pendant l'exécution de l'animation.

Observez l'étiquette Frames en haut de l'interface utilisateur FPS meter. Cela montre des valeurs telles que 50% 1 (938 m) dropped of 1878. Une animation hautes performances présente un pourcentage élevé, tel que 99%, ce qui signifie que peu d'images sont supprimées et que l'animation semble fluide.

Vérifier si une animation déclenche un effet Paint

Certaines propriétés sont plus coûteuses à peindre pour le navigateur que d'autres. Par exemple, tout élément impliquant un flou (une ombre, par exemple) prend plus de temps à peindre que de dessiner un cadre rouge. Ces différences ne sont pas toujours évidentes dans le code CSS, mais les outils de développement pour 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 Paint Flashing (Flasher un écran).
3. Déplacez le curseur sur l'écran.

Si vous constatez que l'ensemble de l'écran clignote ou que des zones en surbrillance qui, selon vous, ne devraient pas changer, examinez les données plus en détail.

Si vous devez déterminer si une propriété spécifique est à l'origine des problèmes de performances liés à l'application d'une peinture, le Profileur de peinture des outils pour les développeurs Chrome peut vous aider.

Outils pour les développeurs 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 la souris ou faites défiler l'écran pour afficher les zones en surbrillance.

Conclusion

Dans la mesure du possible, limitez les animations à opacity et transform pour les conserver à 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 déterminer si les opérations de peinture sont particulièrement coûteuses. Si vous trouvez quelque chose, vérifiez si une autre propriété CSS offre la même apparence et de meilleures performances.

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