Débogueur des animations et transitions

DevTools de Chrome → Autres outils → Animations (ou Cmd+Shift+P → « Animations »). Le panneau enregistre les transitions et animations CSS au fur et à mesure de leur exécution et les affiche sur une ligne du temps avec des commandes de déplacement dans le temps et de réglage de la vitesse de lecture.

Le panneau Animations propose des vitesses de lecture de 10 %, 25 % et 100 %. Ralentir à 10 % révèle les problèmes de temporisation, les défauts des courbes d’accélération et les saccades invisibles à vitesse normale — ce qui est essentiel pour déboguer une chorégraphie complexe impliquant plusieurs éléments.

Chaque animation enregistrée apparaît sous forme de ligne avec le nom de son élément, une barre indiquant sa durée, un décalage de délai et un nombre d’itérations. Les losanges des images-clés indiquent les changements de fonction de temporisation. Le survol d’une ligne met l’élément en évidence dans la fenêtre d’affichage.

Faites glisser la tête de lecture dans le panneau Animations jusqu’à n’importe quel point de la ligne du temps de l’animation. La page rend exactement cette image : vous pouvez figer n’importe quelle animation à n’importe quel moment pour examiner simultanément la position des éléments, leur opacité et leurs valeurs de transformation dans le panneau Calculé.

Cliquez sur une ligne d’animation pour la développer. Les images-clés individuelles apparaissent sous forme de losanges sur la ligne du temps. Cliquez sur un losange d’image-clé pour accéder à la règle @keyframes correspondante dans le panneau Styles et la modifier avec un aperçu en direct.

Chrome DevTools affiche des courbes cubiques de Bézier pour chaque segment d’animation. Cliquez sur l’icône de courbe à côté d’une fonction de temporisation dans le panneau Styles pour ouvrir l’éditeur de courbes cubiques de Bézier : faites glisser les points de contrôle et observez l’animation se mettre à jour en temps réel.

Les transitions CSS sont enregistrées dans le panneau Animations lorsqu’elles sont déclenchées. Déclenchez un survol ou l’activation ou la désactivation d’une classe, et le panneau capture la transition. Examinez sa durée, son délai et sa fonction de temporisation : c’est utile lorsque les transitions semblent incorrectes mais que leur origine n’est pas claire.

Lorsque l’option Rendu → Bordures des calques est activée (DevTools → Rendu), les éléments animés sur leur propre calque GPU affichent des bordures vertes. Les animations non compositées (qui animent la largeur, la position supérieure ou la couleur) n’affichent aucune bordure de calque et peuvent provoquer un clignotement de la peinture, visible lorsque l’option Clignotement de la peinture est activée.

Enregistrez un profil de performances pendant l’animation. Dans le graphique en flamme, recherchez les événements longs de peinture ou de mise en page qui coïncident avec les images de l’animation. Les animations compositées uniquement (transformation/opacité) apparaissent seulement comme des événements de composition de calque : elles sont rapides et n’entraînent aucune peinture.

Les animations JS utilisant rAF apparaissent dans le panneau Performances, sous la section Images. Les rappels rAF longs qui dépassent 16 ms provoquent des pertes d’images. Profilez le rappel pour trouver les calculs coûteux et déplacez-les hors du thread principal à l’aide de Web Workers si possible.

L’API des animations Web (element.animate()) et les bibliothèques fondées sur WAAPI apparaissent dans le panneau Animations aux côtés des animations CSS. Le panneau ne peut pas distinguer leur origine — CSS ou WAAPI — mais les commandes de déplacement dans le temps et de ralenti fonctionnent dans les deux cas.

Que permet de faire le déplacement de la tête de lecture du panneau Animations ?

Le panneau Animations de DevTools enregistre les transitions et animations CSS sur une ligne du temps où il est possible de se déplacer, avec une vitesse de lecture variable, l’inspection des images-clés et la modification des courbes cubiques de Bézier. Associé au profilage des performances et à la visualisation des calques, il fournit des outils complets pour déboguer la correction et les performances des animations CSS.