1
CSS 过渡
捕获 CSS 过渡的计算状态，检测持续时间、缓动函数和目标属性的变化。
15 测试用例
动画
动画、过渡与微交互是把功能性界面转化为有生命力界面的感知层：滑出的菜单、悬停时反应的按钮、网络调用期间安抚用户的 loader。当这一层被破坏时，应用仍然可用，但显得死板或粗糙，用户的信任随之流失。一次被误删的 300ms 过渡会让内容「跳跃」而非滑动，相邻元素将出现在与基准不同的位置。一个因透明的分析跟踪元素被叠加在按钮之上而不再触发的 hover，会破坏整个页面的视觉反馈。从其他项目复制粘贴而来的 loader 会在关键路径中突兀地破坏视觉规范。用人工测试这些行为缓慢、难以复现，且在拥有数十个画面时无法扩展。Delta-QA 通过在截图时将过渡冻结到一个稳定的计算状态，再将快照与基准截图进行比较来处理该类别。hover 等交互状态也会被捕获，以验证按钮按预期改变外观。视觉 diff 突出显示因过渡被删除而产生的位移、样式漂移的 loader、不再出现的动画指示器以及版本之间渲染发生变化的 keyframes。这种方法让 QA 团队可以检测交互层上的视觉回归，而无需手动录制每条用户路径。
我们检测什么
2
Keyframe 动画
在当前帧冻结 @keyframes 以比较不同版本间的动画状态。
3
Hover 和交互状态
捕获 :hover、:active 和其他交互状态的视觉快照以供比较。
4
Transform 和原点
检测 translate、rotate、scale、skew 值和 transform-origin 修改的变化。
实际场景
🎯
变成瞬间完成的过渡动画
一位开发者重构样式时意外删除了下拉菜单上 300ms 的过渡动画。没有过渡效果，菜单直接把下方内容推开，而不是平滑滑动——页面视觉上会"跳动"。可见后果：菜单下方的元素比参考版本偏移得更多，因为浏览器不再有时间平滑重排布局。这是 CSS 重构，没人想到要重新测试视觉交互。Delta-QA 对比菜单打开状态的截图，检测到菜单下方内容的偏移——不同的布局在差异图中清晰可见。
⚠️
换了风格的加载动画
一位开发者从另一个项目复制粘贴了加载动画样式来"统一"组件。新的加载器视觉效果完全不同：更大，有不符合品牌规范的强调色，指示器样式也变了（虚线变成了实线）。它在转，功能上没问题——团队觉得"没事，就是个加载器"。Delta-QA 对比截图，高亮加载器在大小、颜色和形状上的差异——与参考图不再一致的组件在差异图中清晰可见。
💡
失效的悬停效果
一位开发者在按钮上方添加了一个透明元素来处理分析追踪。后果：悬停效果不再触发——鼠标悬停在不可见的元素上，而不是按钮上。按钮在鼠标悬停时保持默认颜色不变，网站感觉"没有生气"。改动是关于追踪的，跟按钮无关——没人想到要检查悬停的视觉反馈。Delta-QA 捕获按钮的悬停状态并对比截图：不再变色的按钮在差异图中清晰可见。