Créer des animations CSS hautes performances

Kayce Basques

Rachel Andrew

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

Consultez la section Pourquoi certaines animations sont-elles lentes ? pour découvrir les sur 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 tous les navigateurs. de l'assistance.

transform

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 36
• <ph type="x-smartling-placeholder"></ph> 12 ans
• <ph type="x-smartling-placeholder"></ph> 16 ans
• <ph type="x-smartling-placeholder"></ph> 9

Source

opacity

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 1 fois
• <ph type="x-smartling-placeholder"></ph> 12 ans
• <ph type="x-smartling-placeholder"></ph> 1 fois
• <ph type="x-smartling-placeholder"></ph> 2.

Source

will-change

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 36
• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> 36
• <ph type="x-smartling-placeholder"></ph> 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 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 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 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éterminer l'impact de la propriété sur le pipeline de rendu ; Évitez toute propriété qui déclenche la mise en page ou la peinture, sauf si cela est absolument nécessaire.

Avertissement :Si vous devez utiliser une propriété qui déclenche la mise en page ou la peinture, vous ne pourra pas maintenir la fluidité ni les performances de l'animation.

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 une nouvelle couche 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 mais vous pouvez forcer manuellement leur création à l'aide de la propriété will-change. Comme son nom l'indique, cette propriété indique au navigateur que cet élément à changer d'une manière ou d'une autre.

Attention :La création de calques pouvant entraîner d'autres problèmes de performances, nous ne nous vous recommandons de l'utiliser dès le début du processus d'optimisation. Ne l'utilisez que si vous remarquez des problèmes graphiques et pensez que la promotion d'un élément sur une nouvelle couche peut vous aider.

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

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

Toutefois, la spécification suggère que vous ne devez le faire que pour les éléments qui sont toujours sur le point de le changement. Par exemple, cela peut être vrai pour une barre latérale dans laquelle l'utilisateur peut glisser et s'affiche. Pour les éléments qui ne changent pas souvent, nous vous recommandons d'appliquer will-change à l'aide de JavaScript lorsqu'un changement est susceptible de se produire. Veillez à laissez suffisamment de temps au navigateur pour effectuer les optimisations nécessaires la propriété lorsque la modification s'est arrêtée.

Remarque :Pour obtenir plus d'informations et d'exemples sur l'utilisation de will-change, consultez Tout ce que vous devez savoir sur la propriété CSS will-change

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

Déboguer les animations lentes ou glitchs

Les outils pour les développeurs Chrome et Firefox offrent de nombreux outils pour vous aider pourquoi vos animations sont lentes ou défectueuses.

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

Une animation qui déplace un élément en utilisant autre chose que transform est susceptibles d'être lentes. L'exemple suivant compare une animation avec transform à une animation avec 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 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. Enregistrer les performances d'exécution pendant l'animation.
3. Inspectez l'onglet Résumé.

Si vous voyez une valeur différente de zéro pour Affichage dans l'onglet Résumé, il se peut que votre animation permet au navigateur de faire fonctionner la mise en page.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> animation-with-top-left peut entraîner le rendu.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> animation-with-transform n'entraîne pas le rendu.

Outils de développement Firefox

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

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

Si vous voyez des entrées pour Recalculer le style, le navigateur doit revenir au début cascade de rendu pour effectuer le rendu de 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 FPS.
3. Observez les valeurs pendant l'exécution de l'animation.

Prêtez attention au libellé Images en haut de l'interface utilisateur du mètre FPS. Cela affiche des valeurs telles que 50% 1 (938 m) dropped of 1878. Un modèle hautes performances l'animation présente un pourcentage élevé (99%, par exemple), ce qui signifie que peu d'images sont et que l'animation semble fluide.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> animation-with-top-left entraîne la suppression de 50% des images

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> L'instruction animation-with-transform n'entraîne la suppression que de 1% des frames.

Vérifier si une animation déclenche l'application de peinture

Certaines propriétés sont plus coûteuses que d'autres à peindre dans le navigateur. Pour Par exemple, tout ce qui implique un floutage (comme une ombre) dure plus longtemps. à peindre que de dessiner un cadre rouge. Ces différences ne sont pas toujours évidentes dans mais les outils de développement pour navigateur peuvent vous aider à identifier les éléments repeintes, 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 (Clignotement de peinture).
3. Déplacez le pointeur sur l'écran.

<ph type="x-smartling-placeholder">

</ph>

Dans cet exemple issu de Google Maps, vous pouvez voir les éléments en train d'être repeints.

Si la totalité de l'écran clignote ou des zones mises en évidence que vous ne pensez pas doit changer, étudiez plus en détail.

Pour déterminer si une propriété spécifique est à l'origine de les problèmes de performances liés à la peinture, le Profileur de peinture. dans les outils pour les développeurs Chrome.

Outils de développement Firefox

1. Ouvrez Paramètres et ajoutez un bouton "Boîte à outils" pour Activez le clignotement de la peinture.
2. Sur la page que vous voulez inspecter, activez le bouton et déplacez votre souris ou faites défiler la page pour afficher les zones en surbrillance.

Conclusion

Si possible, limitez les animations à opacity et transform pour conserver des animations à l'étape de composition du chemin de rendu. Vérifier à l'aide des outils de développement l'étape du tracé affectée par vos animations.

Utilisez le Profileur de peinture pour voir si les opérations de peinture chers. Si vous en trouvez, vérifiez si une autre propriété CSS vous donne la même apparence et de meilleures performances.

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