Animation Inspector 检测、暂停并逐帧检查 CSS 动画、过渡和 @keyframes,让动画调试变得简单。
CSS animations can be notoriously difficult to debug. They happen fast, they overlap, and browser DevTools make you hunt through computed styles to find animation properties. Animation Inspector solves this by automatically detecting every @keyframes animation and CSS transition on the page, listing them with their full configuration (duration, easing, delay, iteration count), and giving you playback controls that work globally or per-animation. Whether you're debugging a jittery hover effect, fine-tuning the timing of a page entrance sequence, or trying to understand how a complex animation library works under the hood, this tool puts you in control.
Instantly freeze every animation on the page with a single click. All animations pause at their current position — not reset to the start. Click play to resume from exactly where they stopped. Essential for inspecting mid-animation states that are impossible to catch with the naked eye.
Adjust the playback speed of all animations simultaneously. Choose from 0.25x (quarter speed), 0.5x, 1x (normal), 2x, or 4x. Running at 0.25x makes even the fastest 200ms transitions easy to observe and debug.
Every CSS animation and transition on the page is automatically detected and displayed in a scrollable list. Each entry shows the animation name (or transition property), duration, timing function (ease, linear, cubic-bezier), delay, iteration count, and current running state.
Drag the timeline scrubber to manually move through an animation frame by frame. See exactly what happens at 25%, 50%, or any point in the animation cycle. The page updates in real-time as you drag.
Pause, play, or adjust speed for individual animations independently. Isolate a single animation to debug it without being distracted by other moving elements on the page.
Click any animation in the list to see its full CSS declaration — @keyframes definition, animation shorthand breakdown, computed start and end states, and which elements it's applied to.
动画检查器 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-origintranslaterotatescaleskewSlow an animation down to 0.25x to identify exactly where a stutter or jank occurs. Check if the issue is caused by layout thrashing (animating width/height instead of transform), incorrect easing, or conflicting animations on the same element.
Use timeline scrubbing to see how your cubic-bezier easing curve actually looks in practice. Compare ease-in vs ease-out behavior at specific percentages. Adjust values and replay until the motion feels right.
Visit a website with impressive animations (landing pages, portfolio sites) and inspect exactly how they're built. See the @keyframes definitions, timing values, and element targeting that makes complex sequences work.
Verify that hover effects, loading spinners, skeleton screens, and page transitions all behave correctly. Pause at mid-states to check for visual glitches like elements overlapping, incorrect z-index during animation, or content reflow.
Identify animations that might cause issues for users with vestibular disorders. Check if prefers-reduced-motion is properly respected by pausing all animations and seeing if the page remains fully functional.
Open the DevSuite Pro floating dock and click the Animation Inspector icon. The tool immediately scans the page and detects all running CSS animations and transitions.
A floating panel appears listing every animation found on the page. Each entry shows the animation name, duration, easing function, and whether it's currently running or paused. The count badge shows the total number of animations detected.
Click the global Pause button to freeze all animations simultaneously. Elements stay in their current mid-animation state, letting you inspect CSS properties, take screenshots, or compare positions.
Use the speed selector to slow animations down to 0.25x for detailed observation, or speed them up to 4x to quickly cycle through long animations. Speed changes apply instantly without restarting.
Drag the timeline scrubber left and right to manually step through the animation. The page updates in real-time, showing you exactly what each frame looks like. Perfect for spotting glitches or verifying easing curves.