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 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 Personnaliser et contrôler les outils de développement > Plus d'outils > Animations.

• 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.

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.

L'onglet Animations comporte quatre sections principales:

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. Affiche les groupes d'animation capturés de deux types, identifiés par des icônes: souris en fonction du défilement et planifier standard (basé sur l'heure).

   Sélectionnez un groupe d'animation ici pour l'inspecter et le modifier dans le volet Details (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 type souris
   • En millisecondes pour les animations temporelles planifiées.

   Dans la timeline, vous pouvez revoir revoir une animation, utiliser la barre de lecture ou accéder à 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 . 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 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.

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.

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.

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.

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.

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:

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'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é.

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ù.

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

   

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.