. La page importe également un fichier CSS nommé style.css : <!DOCTYPE html> Pour styliser les deux éléments, créez un fichier style.css dans le même dossier que le HTML et ajoutez ce qui suit :
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
Ces styles créent deux composants :
Une simple boîte qui tourne et change de couleur lorsque la page se charge. Un bouton qui change sa couleur d’arrière-plan lorsque vous le survolez.
Notez que la boîte rouge s’anime à l’aide de la directive CSS @keyframe, tandis que le bouton utilise une transition. Cela vous permet de comparer les deux approches à l’aide des DevTools du navigateur.
Pour accéder à l’onglet Animations dans Chrome DevTools :
Cliquez avec le bouton droit sur votre page pour afficher le menu contextuel. Cliquez sur Inspecter. Cliquez sur les triples points dans le coin supérieur droit. Accédez à Plus d’outils > Animations. Cela ouvrira le tiroir d’animation dans la section inférieure.
Toutes les animations qui se produisent sur votre page apparaîtront ici. Si vous actualisez votre page et survolez le bouton, les animations apparaîtront sous l’onglet animations.
Le vrai pouvoir entre en jeu lorsque vous cliquez sur l’une de ces animations. Par exemple, si vous cliquez sur l’animation de la boîte, vous verrez que le navigateur présente les images clés comme suit :
Les DevTools affichent toutes les animations relatives à l’élément que vous sélectionnez. Puisqu’il n’y a qu’une seule animation définie pour la boîte rouge (rotateAndChangeColor), vous ne verrez que ses détails.
Vous pouvez faire glisser la ligne vers la gauche pour rendre l’animation beaucoup plus rapide ou la faire glisser vers la droite pour ralentir l’animation. Vous pouvez également suspendre l’animation à certains moments en basculant les icônes de pause et de lecture. Les pourcentages en haut vous permettent de lire l’animation respectivement à un quart de sa vitesse normale et à un dixième de sa vitesse.
Lorsque vous inspectez la transition du bouton, DevTools affichera les propriétés individuelles de la transition : la couleur et la couleur d’arrière-plan.
Cet outil vous permet de manipuler votre animation pour voir exactement comment elle fonctionne. Vous pouvez l’utiliser pour dépanner votre site Web en cas de problème.
Commencez par remplacer le balisage dans votre balise HTML
par le balisage suivant : <div class="move-me move-me-1">steps(4, end)</div> Remplacez ensuite tous les styles de votre fichier style.css par ceci :
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
Tous les éléments
sont dotés d’une animation de déplacement par étapes, qui modifie la position et la couleur d’arrière-plan. En plus de cela, chaque case a une animation différente pour contrôler le nombre d’étapes qu’elle effectuera.
Tandis que la troisième case glisse régulièrement vers la droite, les deux premières se déplaceront de deux pas à la fois jusqu’à ce qu’elles atteignent toutes la fin de l’écran (la deuxième case commençant avant la première case).
Si vous ouvrez l’onglet Animations dans DevTools et actualisez la page, vous retrouverez toutes les informations relatives à ces animations :
Il y a plusieurs éléments qui s’animent tous sur la même période. Dans ce scénario, la couleur d’arrière-plan et la position de la boîte s’animent en même temps pour les trois boîtes.
Une autre chose à noter concerne les nœuds sur chaque ligne d’animation. Lorsqu’une animation se produit un nombre infini de fois, les nœuds indiquent où commence et se termine chaque répétition dans l’animation.
Les nœuds vides sont essentiellement les 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 aurez des nœuds de couleur sombre à chaque fois que votre animation recommence.
Enfin, vous pouvez modifier les animations à l’aide des DevTools, comme vous le pouvez avec n’importe quelle propriété CSS. Toutes les modifications que vous apportez à l’aide de l’interface utilisateur de l’animation apparaîtront dans les styles en ligne sous l’onglet Styles, et vice versa. Cela vous permet d’apporter des modifications, de les tester et de les copier dans votre projet réel.
La fonctionnalité DevTools de Google Chrome est un outil formidable pour déboguer votre CSS, y compris les animations. Il fournit une vue détaillée de chaque transition et animation sur votre page, afin que vous puissiez voir exactement ce qui se passe à chaque étape.
En tant que développeur Web, vous devez être familier avec la fonction DevTools de votre navigateur, ou son équivalent.
