本技能是一份面向 CSS 与 UI 动画的参考指南，用于在实现悬浮效果、按钮反馈、过渡和工具提示等场景时作为检查清单，帮助打造响应灵敏、精致的界面。
主要能力与要点：
- 调试与录制：动画感觉不对时逐帧回放录制内容；针对 transform 动画首尾 1px 抖动，使用 will-change: transform 让元素保持在 GPU 上；建议分多日评审打磨动画。
- 按钮与点击反馈：用 button:active { transform: scale(0.97); } 提供即时反馈；避免从 scale(0) 开始，改用 scale(0.95) 加 opacity: 0，让元素始终保有一定可见形状。
- 工具提示与弹出层：首个提示使用延迟加动画，后续提示以 data-instant 属性跳过动画（Radix UI、Base UI 支持）；弹出层应基于触发点缩放，使用 transform-origin: var(--transform-origin) 而非默认 center。
- 速度与时机：UI 动画应控制在 300ms 以内；不要对键盘交互（方向键导航、快捷键、Tab/焦点移动）做动画；对高频使用的元素谨慎加动画。
- 悬浮态：通过给子元素加动画避免悬浮闪烁；用 @media (hover: hover) and (pointer: fine) 在触屏设备上禁用悬浮态（Tailwind v4 的 hover: 已自动处理）。
- 触控与无障碍：最小触控目标 44px，可用伪元素扩大命中区域而不影响布局。
- 缓动选择：进出场用 ease-out，屏内移动用 ease-in-out，并可使用自定义缓动曲线。
- 视觉技巧：缓动与时机仍无法解决时，可加轻微模糊掩盖瑕疵，但模糊应保持在 20px 以内，尤其在 Safari 上。
使用方式：作为实现与评审动画时的对照清单，覆盖上述代码片段中的模式。限制：资料未提供安装命令、平台支持范围、收费信息或效果承诺；具体实现细节需结合实际项目验证。