1
CSS Transitions
Captures the computed state of CSS transitions, detecting changes in duration, timing function, and target properties.
15 test cases
Animations
Animations, transitions, and micro-interactions are the perceptual layer that turns a functional interface into a living one: a menu that slides, a button that reacts on hover, a loader that reassures users during a network call. When that layer breaks, the application still works but feels dead or sloppy, and user trust slowly erodes. A 300ms transition removed by mistake makes content "jump" instead of slide, and adjacent elements end up at positions that no longer match the baseline. A hover state that stops firing because a transparent analytics tracking element was layered over the buttons kills all visual feedback on the page. A loader copy-pasted from another project introduces a brand inconsistency that stands out in the middle of a critical journey. Testing these behaviors with a human is slow, hard to reproduce, and impossible to scale across dozens of screens. Delta-QA addresses this category by freezing transitions at a computed stable state at capture time, then comparing snapshots against the references. Interactive states like hover are captured too, so you can confirm buttons change appearance as expected. The visual diff highlights misalignments caused by a removed transition, loaders whose styling has drifted, animation indicators that no longer appear, and keyframes whose rendering shifted between two versions. This approach gives QA teams a way to detect a regression on the interaction layer without filming each user journey by hand.
What we detect
2
Keyframe Animations
Freezes @keyframes at their current frame to compare animation states across page versions.
3
Hover & Interactive States
Captures :hover, :active, and other interactive state visual snapshots for comparison.
4
Transform & Origin
Detects changes in translate, rotate, scale, skew values and transform-origin modifications.
Live example
See exactly what Delta-QA detects. Compare the two versions side by side.
Before
After
Real-world scenarios
🎯
The transition that becomes instant
A developer refactors styles and accidentally removes the 300ms transition on the dropdown menu. Without the transition, the menu pushes content below it all at once instead of sliding smoothly — the page visually "jumps." Visible consequence: elements below the menu end up shifted compared to the reference version, because the browser no longer has time to recalculate the layout gradually. It's a CSS refactor, nobody thought to retest visual interactions. Delta-QA compares screenshots of the open menu and detects the content shifts below it — the different layout stands out in the diff.
⚠️
The loader that changes style
A developer copy-pastes loader styles from another project to "harmonize" components. The new loader looks visually different: larger, with an accent color that doesn't match the brand, and a different indicator style (dotted instead of solid). It spins, so functionally it works — the team figured "it's a loader, it's fine." Delta-QA compares screenshots and highlights the differences in size, color, and shape of the loader — the component that no longer matches the reference stands out in the diff.
💡
The hover that stops working
A developer places a transparent element over buttons to handle analytics tracking. Consequence: hover no longer triggers — the mouse hovers the invisible element, not the button. Visually, buttons stay in their default color on hover, the site feels "dead." The change was about tracking, not buttons — nobody thought to check hover visual feedback. Delta-QA captures button hover states and compares screenshots: the button that no longer changes color stands out in the diff.
Ready to catch every visual regression?
Download Delta-QA and start detecting CSS changes in your web pages — no code required.