用途
Implementation Debugging 是一个面向动画实现问题的调试技能，适用于动画不按预期工作、存在缺陷或表现不一致的场景。它把迪士尼动画原则作为诊断框架，帮助开发者从时间节奏、关键帧、舞台呈现、绘制质量、跟随动作等角度定位动画故障。
主要能力
该技能覆盖多种问题指示信号，包括：动画完全不播放、动画播放但外观错误、开发环境正常但生产环境损坏、跨浏览器表现不一致、动画触发时机错误、闪烁或视觉故障。
它按原则提供诊断方向：
- Timing（时间节奏）：动画时间不对时，检查 duration 值，确认单位（ms 与 s），检查 CSS transition 是否被覆盖，查看计算样式。
- Straight Ahead vs Pose-to-Pose（逐帧与关键帧）：关键帧未命中时，核对所有关键帧百分比，检查属性名拼写，确认值可动画。
- Staging（舞台呈现）：动画被隐藏或裁剪时，检查 z-index、overflow、opacity，确认元素在视口内，检查 visibility: hidden。
- Solid Drawing（绘制质量）：动画期间出现视觉故障时，排查子像素渲染问题，添加 transform: translateZ(0) 启用 GPU 图层，检查布局抖动。
- Follow Through（跟随动作）：动画突然结束或状态错误时，检查 animation-fill-mode，确认结束状态与 CSS 一致，检查是否存在竞争动画。
常见缺陷与修复
技能列出症状、可能原因与修复方式：无动画通常因属性不可动画，应改用 transform 而非直接改属性；起始闪烁因缺少初始状态，应显式设置初始值；结束状态错误因填充模式，应添加 forwards；运动卡顿因布局抖动，应只动画 transform/opacity；只播放一次因动画未重置，应移除并重新添加类，或用 JS 处理。
快速修复与排查清单
快速修复包括：查看 DevTools 动画面板时间线、确认属性可动画、添加 animation-fill-mode: forwards、用 will-change: transform 强制 GPU 图层、检查 !important 是否覆盖动画。
排查清单涵盖：动画类/触发器是否被应用、属性是否可动画（display 不可，opacity 可）、计算样式是否有覆盖、元素是否可见、是否有 JavaScript 错误阻断执行、查看 DevTools 动画面板、在无扩展的隐身模式测试、对比正常与损坏环境。
代码模式
技能提供调试代码模式：通过 animationstart 与 animationend 事件监听记录动画事件；用 getComputedStyle 检查计算后的 animation 与 transition；通过移除类、触发 reflow、重新添加类来重置动画。
DevTools 技巧
包括：Elements > Styles 查看计算动画值；Performance 面板录制并分析帧；Animations 面板减速、重放、检查；Console 记录动画事件。
适用场景与限制
该技能适用于前端动画调试，尤其是 CSS 动画与过渡相关的问题排查。资料未提供具体平台、收费、价格或效果保证等信息。