Animations: inspectez et modifiez les effets d'animation CSS

Sofia Emelianova
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 l'onglet Animations. Il détecte automatiquement les animations et les trie en groupes.

L'onglet Animations a deux fonctions principales:

  • Inspectez les animations. Ralentissez, revoyez ou inspectez le code source pour rechercher un groupe d'animation.
  • Modifier les animations Modifier le timing, le délai, la durée ou les décalages d'images clés d'un groupe d'animations La modification des images clés et de Bezier n'est pas acceptée.

L'onglet Animations accepte les animations CSS, les transitions CSS et les animations Web, ainsi que l'API View Transitions. Les animations requestAnimationFrame ne sont pas encore acceptées.

Qu'est-ce qu'un groupe d'animation ?

Un groupe d'animations est un ensemble d'animations qui semblent être liées entre elles.

Pour l'instant, le Web n'a pas de véritable concept d'animation de groupe. C'est pourquoi les concepteurs de mouvement et les développeurs les écrivent et les chronométrent pour qu'ils apparaissent comme un effet visuel cohérent. L'onglet Animations prédit les animations associées en fonction de l'heure de début (en excluant les retards) et les regroupe côte à côte.

En d'autres termes, l'onglet Animations regroupe les animations déclenchées dans le même bloc de script. Toutefois, si elles sont asynchrones, elles se retrouvent dans des groupes différents.

Premiers pas

Vous pouvez ouvrir l'onglet Animations de deux manières:

  • Sélectionnez Plus. Personnaliser et contrôler les outils de développement > Plus d'outils > Animations. Animations dans le menu.
  • Ouvrez le menu Commandes en appuyant sur l'une des touches suivantes:

    • Sous macOS: Cmd+Maj+P
    • Sous Windows, Linux ou ChromeOS: Ctrl+Maj+P

    Commencez ensuite à saisir Show Animations et sélectionnez le panneau "Drawer" correspondant. Afficher les animations.

Par défaut, l'onglet Animations s'ouvre sous la forme d'un onglet à côté du panneau Console. Vous pouvez l'utiliser avec n'importe quel panneau en tant qu'onglet de panneau ou le déplacer en haut des outils de développement.

Onglet "Animations" vide.

L'onglet Animations comporte quatre sections principales:

Sections du panneau "Animations"

  1. Contrôles. Vous pouvez alors bloquer tous les groupes d'animations capturés, mettre en pause Pause ou play_arrow Reprendre les animations, ou modifier la vitesse du groupe d'animations sélectionné.
  2. Présentation. Sélectionnez un groupe d'animation ici pour l'inspecter et le modifier dans le volet Details (Détails).
  3. Timeline : relancez la relecture d'une animation, utilisez la barre de lecture ou accédez à un moment spécifique.
  4. Détails. Inspectez et modifiez le groupe d'animation sélectionné.

Pour capturer une animation, déclenchez-la lorsque l'onglet Animations est ouvert. Si une animation est déclenchée lors du chargement de la page, actualisez-la.

Inspecter les animations

Une fois que vous avez capturé une animation, plusieurs possibilités s'offrent à vous pour la relire:

  • Pointez sur sa vignette dans le volet Vue d'ensemble 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 elle s'arrête dans le cas contraire.
  • Sélectionnez le groupe d'animation dans le volet Aperçu (pour qu'il s'affiche dans le volet Détails), puis cliquez sur le bouton Relecture Bouton "Revoir". L'animation est relancée dans la fenêtre d'affichage.

Cliquez sur les boutons Vitesse de l'animation Boutons permettant d'accélérer l'animation dans la barre Commandes pour modifier la vitesse d'aperçu 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 Présentation pour afficher ses détails.

Dans le volet Details (Détails), chaque animation a sa propre ligne. Pour afficher le nom complet de l'élément correspondant, redimensionnez la colonne des noms.

Le volet Détails.

Pointez sur une animation pour la mettre en surbrillance dans la fenêtre d'affichage. Cliquez sur l'animation pour la sélectionner dans le panneau Éléments.

Pointez sur une animation pour la mettre en surbrillance dans la fenêtre d'affichage.

Certaines animations se répètent indéfiniment si leur propriété animation-iteration-count est définie sur infinite. L'onglet Animations affiche leurs définitions et leurs itérations.

Itérations d'animation

La partie la plus à gauche et la plus sombre d'une animation correspond à sa définition. Les 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 les itérations de la section 1.

Schéma des itérations d'animation.

Si la même animation est appliquée à deux éléments, l'onglet 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, tout comme les éléments div.feet::before et div.feet::after.

Animations avec un code couleur

Modifier les animations

L'onglet Animations vous permet de modifier une animation de trois manières différentes:

  • Durée de l'animation.
  • Temps d'affichage des images clés.
  • Délai avant le début.

Pour cette section, supposons que la capture d'écran suivante représente l'animation d'origine:

Animation d'origine avant modification

Pour modifier la durée d'une animation, faites glisser le premier ou le dernier cercle.

Durée modifiée.

Si l'animation définit des règles d'image clé, celles-ci sont représentées par des cercles internes blancs. Faites glisser l'une de ces options pour modifier la chronologie de l'image clé.

Image clé modifiée.

Pour ajouter un délai à une animation, cliquez sur l'animation elle-même, et non sur les cercles, puis faites-la glisser n'importe où.

Délai modifié.

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)

Pour modifier cette structure dans Éléments > Styles, procédez comme suit:

  1. Ouvrez les outils de développement et inspectez une page qui utilisait l'API View Transitions. Par exemple, cette page de démonstration.
  2. Dans Animations, cliquez sur Pause Pause (Mettre en pause).
  3. Sur la page, déclenchez une animation. Le panneau Animations la capture et s'interrompt immédiatement. Vous pouvez maintenant trouver la structure ::view-transition dans le DOM, au-dessus de l'élément <head>.

    Modification du code CSS du pseudo-élément ::view-transition

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

  5. Reprenez l'animation et relisez-la pour voir le résultat.

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