Inspectez et modifiez des animations à l'aide de l'onglet du panneau Animations des outils pour les développeurs Chrome.
Présentation
Pour capturer des animations, ouvrez le panneau Animations. Il détecte automatiquement les animations et les trie par groupes.
Le panneau Animations a deux objectifs principaux :
- Inspectez les animations. ralentir, rejouer ou inspecter le code source d'un groupe d'animations ;
- Modifier les animations Vous pouvez modifier les codes temporels, le délai, la durée ou les décalages d'images clés d'une le groupe d'animation. L'édition d'images clés et de Bézier n'est pas prise en charge.
Le panneau Animations est compatible avec les animations CSS, les transitions CSS et les animations Web, ainsi qu'avec l'API View Transitions.
Les animations requestAnimationFrame ne sont pas encore prises en charge.
Qu'est-ce qu'un groupe d'animation ?
Un groupe d'animations est un ensemble d'animations qui semblent liées les unes aux autres.
Pour le moment, le Web ne dispose pas d'un véritable concept d'animation de groupe. Les concepteurs et développeurs de motion design composent et synchronisent donc des animations individuelles pour qu'elles apparaissent comme un effet visuel cohérent. Le panneau Animations prédit les animations associées en fonction de l'heure de début (à l'exclusion des délais) et les regroupe côte à côte.
En d'autres termes, le panneau Animations regroupe les animations déclenchées dans le même bloc de script, mais si elles sont asynchrones, elles se retrouvent dans des groupes différents.
Ouvrir le panneau "Animations"
Il existe deux façons d'ouvrir le panneau Animations :
- Sélectionnez
Customize and control DevTools > (Personnaliser et contrôler les outils de développement) > Plus d'outils > Animations :
Ouvrez le menu de commandes en appuyant sur l'une des options suivantes:
- Sous macOS: Commande+Maj+P
- Sous Windows, Linux ou ChromeOS: Ctrl+Maj+P
Commencez ensuite à saisir
Show Animations, puis sélectionnez le panneau "Drawer" (Panneau) correspondant.
Par défaut, le panneau Animations s'ouvre sous forme d'onglet à côté du panneau Console. En tant qu'onglet de panneau, vous pouvez l'utiliser avec n'importe quel panneau ou le déplacer en haut de DevTools.
Le panneau Animations capture automatiquement les animations en cours lorsque vous l'ouvrez. Si une animation est déclenchée au chargement de la page ou qu'elle s'est déjà arrêtée, actualisez la page avec le panneau ouvert.
Se familiariser avec l'interface utilisateur du panneau "Animations"
Le panneau Animations comporte quatre sections principales :
- Contrôles. Vous pouvez alors Effacer tous les groupes d'animations capturés, Pause ou Réactiver les animations, ou modifier la vitesse du groupe d'animations sélectionné.
Présentation Affiche des groupes d'animations capturés de deux types marqués d'icônes: avec défilement et standard (basée sur le temps).
Sélectionnez un groupe d'animation ici pour l'inspecter et le modifier dans le volet Détails.
Chronologie. Selon le type de groupe d'animation, la timeline peut être:
- En pixels pour les animations liées au défilement de la .
- En millisecondes pour les animations temporelles de .
Dans la timeline, vous pouvez la lecture d'une animation, utiliser la barre de lecture ou accéder à un point spécifique.
Détails Inspectez et modifiez le groupe d'animation sélectionné.
Pour capturer une animation, déclenchez-la lorsque le panneau Animations est ouvert.
Inspecter les animations
Une fois que vous avez capturé une animation, vous pouvez la lire de plusieurs manières :
- Pointez sur sa vignette dans le volet Présentation pour afficher un aperçu.
- Faites glisser la tête de lecture (barre verticale rouge) pour faire défiler l'animation de la fenêtre d'affichage ou cliquez n'importe où sur la timeline pour définir la tête de lecture sur un point spécifique. L'animation continue de s'exécuter si elle était déjà en cours de lecture, sinon elle s'arrête.
- Sélectionnez le groupe d'animations dans le volet Aperçu (pour l'afficher dans le volet Détails).
volet) et appuyez sur le bouton Relecture
. L'animation est rejouée dans la fenêtre d'affichage.
Cliquez sur les boutons 
Vitesse de l'animation dans la barre Commandes pour modifier la vitesse d'aperçu du groupe d'animations sélectionné.
Afficher les détails de l'animation
Une fois que vous avez capturé un groupe d'animation, cliquez dessus dans le volet Aperçu pour en afficher les détails.
Dans le volet Détails, chaque animation est présentée sur une ligne distincte. Pour afficher le nom complet de l'élément correspondant, redimensionnez la colonne des noms.
Pointez sur une animation pour la mettre en surbrillance dans la fenêtre d'affichage. Cliquez sur l'animation pour la sélectionner dans Éléments.
Certaines animations se répètent indéfiniment si leur propriété animation-iteration-count est définie sur infinite. Le panneau Animations affiche leurs définitions et itérations.
La section la plus à gauche et la plus sombre d'une animation est sa définition. Les sections de droite, plus claires, représentent les itérations.
Par exemple, dans la capture d'écran suivante, les sections 2 et 3 représentent itérations de la section 1.
Si la même animation est appliquée à deux éléments, le panneau Animations leur attribue la même couleur. La couleur elle-même est aléatoire et n'a aucune signification. Par exemple, dans la capture d'écran ci-dessous, la même animation (eyes) est appliquée aux deux éléments div.eye.left::after et div.eye.right::after, ainsi qu'aux éléments div.feet::before et div.feet::after.
Modifier les animations
Il existe trois façons de modifier une animation avec le panneau Animations:
- Durée de l'animation.
- Temps de rendu des images clés.
- Délai de début.
Pour cette section, supposons que la capture d'écran suivante représente l'animation d'origine:
Pour modifier la durée d'une animation, faites glisser le premier ou le dernier cercle.
Si l'animation définit des règles de keyframe, elles sont représentées par des cercles intérieurs blancs. Faites glisser l'un de ces éléments pour modifier la chronologie de l'image clé.
Pour ajouter un décalage à une animation, cliquez sur l'animation elle-même, et non sur les cercles, puis faites-la glisser n'importe où.
Modifier @keyframes en direct
Lorsque vous modifiez @keyframes dans Styles, les effets s'affichent immédiatement dans le panneau Animations.
Essayez-la sur cette page de démonstration:
- Ouvrez le panneau Animations. Il capture automatiquement l'animation par pulsation en cours sur la page. Sélectionnez l'animation sous les commandes dans la barre d'action.
- Dans Éléments, inspectez l'élément avec
class="pulser", puis recherchez la section@keyframes pulsedans Styles. - Essayez de modifier les images clés. Par exemple, remplacez la deuxième image clé
50%par20%. - Observez l'impact de vos modifications dans Styles sur l'animation capturée par le panneau Animations.
Modifier les pseudo-éléments ::view-transition pendant une animation
L'API View Transitions vous permet de modifier le DOM en une seule étape, tout en créant une transition animée entre les deux états. Pendant une animation, l'API construit une arborescence de pseudo-éléments avec la structure suivante:
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)
Modifier cette structure dans Éléments > Styles:
- Ouvrez les outils de développement, puis inspectez une page qui utilise l'API View Transitions. Par exemple, cette page de démonstration.
- Dans Animations, cliquez sur Mettre en veille.
Sur la page, déclenchez une animation. Le panneau Animations la capture et la met immédiatement en pause. La structure
::view-transitionse trouve désormais dans le DOM, au-dessus de l'élément<head>.
Dans Éléments > Styles, modifiez le CSS des pseudo-éléments
::view-transition.Reprenez l'animation et rejouez-la pour voir le résultat.
Pour en savoir plus, consultez Transitions lisses et simples avec l'API View Transitions.