Comment inspecter vos animations CSS avec Chrome DevTools

L'art de l'animation CSS décortiqué grâce aux outils de développement

Des animations CSS bien conçues peuvent véritablement transformer un site web. Toutefois, leur création peut s'avérer complexe sans outils permettant un contrôle fin. Imaginez pouvoir visualiser précisément le déroulement de chaque étape d'une animation : c'est désormais possible !

Les outils de développement (DevTools) de Google Chrome et Firefox offrent une fonctionnalité d'inspection d'animations. Cet article vous guidera dans l'utilisation de cet outil puissant pour perfectionner vos animations et même comprendre le fonctionnement de vos effets visuels préférés sur le web.

Les DevTools de Chrome sont un allié précieux pour déboguer l'intégralité de votre CSS, et bien plus. Commençons par un exemple simple afin de comprendre comment utiliser ces outils pour examiner une animation.

Mise en place d'animations via HTML et CSS

Le code HTML ci-dessous crée une page contenant deux éléments : une `

` et un `

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-inspect-your-css-animations-with-chrome-devtools/style.css">
  </head>
  <body>
    <div id="box"></div>
    <button>Test Button</button>
  </body>
</html>

Pour personnaliser l'apparence de ces deux éléments, créez un fichier style.css dans le même dossier que votre fichier HTML et insérez le code suivant :

#box {
  background: red;
  height: 400px;
  width: 400px;
  margin-bottom: 1rem;
  animation: rotateAndChangeColor 1000ms ease-in-out;
}

button {
  font-size: larger;
  background-color: white;
  border: 1px solid black;
  padding: 0.5em 1em;
  color: black;
  height: 80px;
  width: 300px;
  border-radius: 0.5em;
  transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
  cursor: pointer;
}

button:hover {
  background-color: black;
  color: white;
}

@keyframes rotateAndChangeColor {
  0% {
    rotate: 0deg;
    background: red;
  }
  10% {
    background: green;
  }
  40% {
    background: blue;
  }
  70% {
    background: yellow;
  }
  100% {
    rotate: 360deg;
    background: red;
  }
}

Ce code génère deux composants distincts :

Une simple boîte qui effectue une rotation tout en changeant de couleur au chargement de la page.
Un bouton qui change de couleur d'arrière-plan lorsqu'il est survolé.

Notons que l'animation de la boîte rouge est gérée par la règle CSS `@keyframes`, tandis que le bouton utilise une transition. Cela permet de comparer les deux approches à l'aide des DevTools.

Inspection des animations avec les DevTools

Pour accéder à l'onglet "Animations" dans les DevTools de Chrome :

Faites un clic droit sur votre page afin d'afficher le menu contextuel.
Cliquez sur "Inspecter".
Cliquez sur les trois points verticaux dans le coin supérieur droit.
Allez dans "Plus d'outils" > "Animations".

Le panneau "Animations" s'ouvrira alors dans la partie inférieure de la fenêtre.

Toutes les animations en cours sur votre page y seront affichées. Actualisez votre page et survolez le bouton ; les animations correspondantes apparaîtront dans l'onglet "Animations".

Le potentiel de cet outil se révèle pleinement lorsque l'on clique sur une animation. Par exemple, en cliquant sur l'animation de la boîte, le navigateur affichera les images clés de la manière suivante :

Les DevTools affichent toutes les animations associées à l'élément sélectionné. Étant donné qu'une seule animation est définie pour la boîte rouge ("rotateAndChangeColor"), ses détails sont les seuls affichés.

Vous pouvez déplacer le curseur vers la gauche afin d'accélérer l'animation ou vers la droite afin de la ralentir. Vous pouvez aussi suspendre l'animation à des instants précis en utilisant les boutons pause et lecture. Les pourcentages affichés en haut vous permettent de visualiser l'animation à un quart ou un dixième de sa vitesse habituelle.

Lorsque vous examinez la transition du bouton, les DevTools présentent les propriétés concernées : la couleur et la couleur d'arrière-plan.

Cet outil permet de manipuler l'animation pour observer précisément son comportement. Il peut servir à déboguer votre site Web en cas de problème.

Exemples d'animations avancées

Remplacez le contenu de votre balise HTML `` par le code suivant :

<div class="move-me move-me-1">steps(4, end)</div>
<br />
<div class="move-me move-me-2">steps(4, start)</div>
<br />
<div class="move-me move-me-3">no steps</div>

Puis, remplacez l'intégralité du contenu de votre fichier style.css par ce qui suit :

.move-me {
  display: inline-block;
  padding: 20px;
  color: white;
  position: relative;
  margin: 0 0 10px 0;
}

.move-me-1 {
  animation: move-in-steps 8s steps(4, end) infinite;
}

.move-me-2 {
  animation: move-in-steps 8s steps(4, start) infinite;
}

.move-me-3 {
  animation: move-in-steps 8s infinite;
}

body {
  padding: 20px;
}

@keyframes move-in-steps {
  0% {
    left: 0;
    background: blue;
  }
  100% {
    left: 100%;
    background: red;
  }
}

Chaque élément `

` est doté d'une animation de déplacement par étapes, qui modifie la position et la couleur de fond. De plus, chaque élément possède une animation différente pour contrôler le nombre d'étapes effectuées.

Alors que le troisième élément glisse régulièrement vers la droite, les deux premiers se déplaceront par bonds successifs jusqu'à atteindre la fin de l'écran (le deuxième élément commençant sa course avant le premier).

Si vous ouvrez l'onglet "Animations" dans les DevTools et que vous rechargez la page, vous trouverez toutes les informations relatives à ces animations :

Plusieurs éléments s'animent simultanément sur la même période. Dans ce cas précis, la couleur de fond et la position des trois éléments sont animées en parallèle.

Il faut également prêter attention aux nœuds présents sur chaque ligne d'animation. Lorsqu'une animation se répète un nombre infini de fois, les nœuds indiquent où commence et se termine chaque répétition.

Les nœuds vides correspondent aux images clés de votre animation, tandis que les nœuds pleins et colorés représentent le début et la fin de l'animation. Vous observerez des nœuds foncés à chaque nouvelle itération.

Enfin, les DevTools permettent de modifier les animations, à l'instar de toute autre propriété CSS. Toutes les modifications apportées via l'interface de gestion de l'animation seront visibles dans les styles en ligne de l'onglet "Styles", et inversement. Cela vous donne la possibilité de tester vos modifications et de les copier dans votre projet réel.

L'outil "Animations" des DevTools de Google Chrome est un allié précieux pour déboguer votre CSS, et plus particulièrement vos animations. Il offre une vue détaillée de chaque transition et animation sur votre page, ce qui vous permet de suivre précisément leur déroulement.

Tout développeur web devrait se familiariser avec les DevTools de son navigateur, ou leur équivalent.