L'Animation Inspector vous donne un contrôle total sur chaque animation CSS et transition en cours d'exécution sur n'importe quelle page web. Mettez toutes les animations en pause d'un coup, ralentissez-les pour une inspection image par image, accélérez-les pour tester les performances, ou parcourez la timeline manuellement — le tout depuis un seul panneau flottant, sans toucher aux DevTools du navigateur.
Les animations CSS sont notoirement difficiles à déboguer. Elles s'exécutent rapidement, se chevauchent, et les DevTools du navigateur vous obligent à fouiller dans les styles calculés pour trouver les propriétés d'animation. L'Animation Inspector résout ce problème en détectant automatiquement chaque animation @keyframes et chaque transition CSS sur la page, en les listant avec leur configuration complète (duration, easing, delay, iteration count), et en vous offrant des contrôles de lecture qui s'appliquent globalement ou par animation. Que vous déboguiez un effet hover saccadé, affiniez le timing d'une séquence d'entrée de page, ou cherchiez à comprendre le fonctionnement interne d'une bibliothèque d'animation complexe, cet outil vous donne le contrôle.
Figez instantanément chaque animation de la page d'un seul clic. Toutes les animations se mettent en pause à leur position actuelle — sans revenir au début. Cliquez sur lecture pour reprendre exactement là où elles se sont arrêtées. Indispensable pour inspecter des états intermédiaires impossibles à saisir à l'œil nu.
Ajustez la vitesse de lecture de toutes les animations simultanément. Choisissez parmi 0.25x (quart de vitesse), 0.5x, 1x (normal), 2x ou 4x. En exécutant à 0.25x, même les transitions les plus rapides de 200ms deviennent faciles à observer et à déboguer.
Chaque animation CSS et transition sur la page est automatiquement détectée et affichée dans une liste déroulante. Chaque entrée indique le nom de l'animation (ou la propriété de transition), la duration, la timing function (ease, linear, cubic-bezier), le delay, l'iteration count et l'état d'exécution actuel.
Faites glisser le curseur de la timeline pour avancer manuellement dans une animation, image par image. Observez exactement ce qui se passe à 25 %, 50 % ou à n'importe quel point du cycle d'animation. La page se met à jour en temps réel pendant que vous faites glisser.
Mettez en pause, lisez ou ajustez la vitesse de chaque animation indépendamment. Isolez une animation spécifique pour la déboguer sans être distrait par les autres éléments en mouvement sur la page.
Cliquez sur une animation dans la liste pour voir sa déclaration CSS complète — définition @keyframes, décomposition du raccourci animation, états de début et de fin calculés, et les éléments auxquels elle est appliquée.
Inspecteur d'animations covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskewRalentissez une animation à 0.25x pour identifier précisément où un bégaiement ou un saut se produit. Vérifiez si le problème est causé par du layout thrashing (animation de width/height au lieu de transform), un easing incorrect, ou des animations conflictuelles sur le même élément.
Utilisez le défilement de la timeline pour voir comment votre cubic-bezier easing curve se comporte réellement en pratique. Comparez le comportement de ease-in par rapport à ease-out à des pourcentages précis. Ajustez les valeurs et rejouez jusqu'à ce que le mouvement soit parfait.
Visitez un site web avec des animations impressionnantes (pages d'accueil, sites portfolio) et inspectez exactement comment elles sont construites. Découvrez les définitions @keyframes, les valeurs de timing et le ciblage des éléments qui font fonctionner les séquences complexes.
Vérifiez que les effets hover, les spinners de chargement, les skeleton screens et les transitions de page se comportent correctement. Faites une pause sur les états intermédiaires pour détecter des glitches visuels tels que des éléments qui se chevauchent, un z-index incorrect pendant l'animation, ou un reflow du contenu.
Identifiez les animations susceptibles de poser problème aux utilisateurs souffrant de troubles vestibulaires. Vérifiez si prefers-reduced-motion est correctement respecté en mettant toutes les animations en pause et en vérifiant que la page reste pleinement fonctionnelle.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Animation Inspector. L'outil analyse immédiatement la page et détecte toutes les animations CSS et transitions en cours d'exécution.
Un panneau flottant apparaît listant chaque animation trouvée sur la page. Chaque entrée affiche le nom de l'animation, la duration, la easing function, et si elle est en cours d'exécution ou en pause. Le badge de comptage indique le nombre total d'animations détectées.
Cliquez sur le bouton Pause global pour figer toutes les animations simultanément. Les éléments restent dans leur état intermédiaire actuel, vous permettant d'inspecter les propriétés CSS, de prendre des captures d'écran ou de comparer les positions.
Utilisez le sélecteur de vitesse pour ralentir les animations jusqu'à 0.25x pour une observation détaillée, ou les accélérer jusqu'à 4x pour parcourir rapidement les longues animations. Les changements de vitesse s'appliquent instantanément sans redémarrage.
Faites glisser le curseur de la timeline vers la gauche et vers la droite pour avancer manuellement dans l'animation. La page se met à jour en temps réel, vous montrant exactement l'apparence de chaque frame. Idéal pour repérer les glitches ou vérifier les easing curves.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.