1
CSS 过渡
捕获 CSS 过渡的计算状态，检测持续时间、缓动函数和目标属性的变化。
15 测试用例
动画
动画和过渡使界面栩栩如生，但也引入视觉不稳定性。Delta-QA 在计算状态下冻结过渡并捕获 transform 值以检测变化。
我们检测什么
2
Keyframe 动画
在当前帧冻结 @keyframes 以比较不同版本间的动画状态。
3
Hover 和交互状态
捕获 :hover、:active 和其他交互状态的视觉快照以供比较。
4
Transform 和原点
检测 translate、rotate、scale、skew 值和 transform-origin 修改的变化。
实际场景
🎯
变成瞬间完成的过渡动画
一位开发者重构样式时意外删除了下拉菜单上 300ms 的过渡动画。没有过渡效果，菜单直接把下方内容推开，而不是平滑滑动——页面视觉上会"跳动"。可见后果：菜单下方的元素比参考版本偏移得更多，因为浏览器不再有时间平滑重排布局。这是 CSS 重构，没人想到要重新测试视觉交互。Delta-QA 对比菜单打开状态的截图，检测到菜单下方内容的偏移——不同的布局在差异图中清晰可见。
⚠️
换了风格的加载动画
一位开发者从另一个项目复制粘贴了加载动画样式来"统一"组件。新的加载器视觉效果完全不同：更大，有不符合品牌规范的强调色，指示器样式也变了（虚线变成了实线）。它在转，功能上没问题——团队觉得"没事，就是个加载器"。Delta-QA 对比截图，高亮加载器在大小、颜色和形状上的差异——与参考图不再一致的组件在差异图中清晰可见。
💡
失效的悬停效果
一位开发者在按钮上方添加了一个透明元素来处理分析追踪。后果：悬停效果不再触发——鼠标悬停在不可见的元素上，而不是按钮上。按钮在鼠标悬停时保持默认颜色不变，网站感觉"没有生气"。改动是关于追踪的，跟按钮无关——没人想到要检查悬停的视觉反馈。Delta-QA 捕获按钮的悬停状态并对比截图：不再变色的按钮在差异图中清晰可见。