Animations: inspectez et modifiez les effets d'animation CSS

Kayce Basques

Sofia Emelianova

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 en groupes.

Le panneau Animations a deux fonctions principales:

• Inspecter les animations Ralentissez, relancez ou inspectez le code source d'une animation groupe.
• 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 l'instant, le Web n'a pas de véritable concept d'animation de groupe. Par conséquent, les concepteurs de mouvement et les développeurs composeront et chronométrer les animations individuelles pour qu'elles apparaissent sous la forme d'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 la forme d'un onglet à côté du panneau Console. Vous pouvez l'utiliser avec n'importe quel panneau ou le déplacer en haut des Outils de développement.

Le panneau Animations capture automatiquement les animations en cours lorsque vous l'ouvrez. Si une animation se déclenche au chargement de la page ou 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:

1. Contrôles. Vous pouvez alors bloquer Effacer tous les groupes d'animations capturés, mettre en pause Pause ou play_arrow Reprendre les animations, ou modifier la vitesse du groupe d'animation sélectionné.

2. Aperçu. Affiche des groupes d'animations capturés de deux types marqués d'icônes: avec défilement à la souris et planification standard (basée sur le temps).

   Sélectionnez ici un groupe d'animation pour l'inspecter et le modifier dans le volet Détails.

3. Chronologie. Selon le type de groupe d'animation, la timeline peut être:

   • En pixels pour les animations liées au défilement de la souris.
   • En millisecondes pour les animations temporelles de planification.

   Dans la timeline, vous pouvez relancer la lecture d'une animation, utiliser la barre de lecture ou accéder à un point spécifique.

4. Détails Examinez 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 relire de plusieurs manières:

• Pointez sur sa vignette dans le volet Aperçu pour en afficher un aperçu.
• Faites glisser la tête de lecture (barre verticale rouge) pour parcourir l'animation de la fenêtre d'affichage ou cliquez n'importe où sur la timeline pour la définir sur un point spécifique. La lecture de l'animation se poursuit si elle était déjà en cours et s'arrête dans le cas contraire.
• 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 . La l'animation est relancée dans la fenêtre d'affichage.

Cliquez sur les boutons Vitesse de l'animation dans la barre Commandes pour modifier la vitesse de prévisualisation du groupe d'animation 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 Elements.

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 partie la plus à gauche, la plus sombre d'une animation, est sa définition. Sections de droite, plus estompées 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 le rôle 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, les deux éléments div.eye.left::after et div.eye.right::after ont la même animation (eyes) qui leur est appliquée, tout comme les é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 d'images clés, celles-ci sont représentées par des cercles internes 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:

1. Ouvrez le panneau Animations. Il capture automatiquement l'animation par pulsation en cours sur la page. Sélectionnez l'animation sous les commandes de la barre d'action.
2. Dans Elements, inspectez l'élément avec class="pulser", puis recherchez la section @keyframes pulse dans Elements.
3. Essayez de modifier les images clés. Par exemple, remplacez la deuxième image clé 50% par 20%.
4. Observez l'impact des modifications apportées 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 Elements > Styles:

1. Ouvrez les outils de développement, puis inspectez une page qui utilise l'API View Transitions. Par exemple, cette page de démonstration.
2. Dans Animations, cliquez sur pause Pause.

3. Sur la page, déclenchez une animation. Le panneau Animations le capture et le met immédiatement en pause. La structure ::view-transition se trouve désormais dans le DOM, au-dessus de l'élément <head>.

   

4. Dans Elements > Styles : modifiez le CSS des pseudo-éléments ::view-transition.

5. Relancez l'animation, puis relancez-la pour voir le résultat.

Pour en savoir plus, consultez Transitions lisses et simples avec l'API View Transitions.