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 type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
opacity
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
will-change
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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;
}
}
É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.
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.
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.
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
.
.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.
Outils pour les développeurs Chrome
- Ouvrez le panneau Performances.
- Enregistrer les performances d'exécution pendant l'animation.
- 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">![Le panneau "Summary" (Résumé) indique 37 ms pour le rendu et 79 ms pour la peinture.](https://web.developers.google.cn/static/articles/animations-guide/image/the-summary-panel-shows-3-d8a0efc73229b.jpg?authuser=9&hl=fr)
![Le panneau "Summary" (Résumé) affiche des valeurs nulles pour le rendu et le dessin.](https://web.developers.google.cn/static/articles/animations-guide/image/the-summary-panel-show-ze-6036893c491f8.jpg?authuser=9&hl=fr)
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.
- Ouvrez le panneau Performances.
- Commencez à enregistrer les performances pendant la lecture de votre animation.
- 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
- Ouvrez l'onglet Rendu dans les outils pour les développeurs Chrome.
- Cochez la case Compteur FPS.
- 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.
![Le compteur FPS indique que 50% des images ont été abandonnées](https://web.developers.google.cn/static/articles/animations-guide/image/the-fps-meter-shows-50-e279493d08c47.jpg?authuser=9&hl=fr)
![L'indicateur FPS indique que seulement 1% des images ont été perdues.](https://web.developers.google.cn/static/articles/animations-guide/image/the-fps-meter-shows-1-97f98fe03092a.jpg?authuser=9&hl=fr)
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
- Ouvrez l'onglet Rendu dans les outils pour les développeurs Chrome.
- Sélectionnez Paint Flashing (Clignotement de peinture).
- Déplacez le pointeur sur l'écran.
![Élément d'UI surligné en vert pour montrer qu'il va être repeint](https://web.developers.google.cn/static/articles/animations-guide/image/a-ui-element-highlighted-43b56111254fb.jpg?authuser=9&hl=fr)
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
- Ouvrez Paramètres et ajoutez un bouton "Boîte à outils" pour Activez le clignotement de la peinture.
- 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.