用途
本技能是一份实用的动画技巧参考指南，面向 CSS 与 UI 动画场景，用于构建响应迅速、精致的界面。文档建议在实现动画时将其作为检查清单使用，适用于实现悬停效果、工具提示、按钮反馈、过渡动画，或修复动画问题。
主要能力
文档按主题整理了常见动画场景的具体做法：
录制与调试
- 录制动画：当感觉不对却找不出原因时，录制动画并逐帧回放，可发现正常速度下不可见的细节。
- 修复抖动动画：CSS transform 动画在开始/结束时可能因 GPU/CPU 渲染交接而偏移 1px。修复方式是给元素添加
will-change: transform;，让浏览器在整个动画期间将元素保留在 GPU 上。 - 适当休息：不要一次性写完并发布动画，隔一段时间用新的眼光回看。最好的动画是经过数天而非数小时审查与打磨的。
按钮与点击反馈
- 按下时缩放按钮：通过细微的缩放反馈让界面感觉响应迅速，例如
button:active { transform: scale(0.97); }，提供界面正在响应的即时视觉反馈。 - 不要从 scale(0) 开始动画：从 scale(0) 开始会让元素凭空出现，感觉不自然。应改为从
transform: scale(0.95); opacity: 0;过渡到transform: scale(1); opacity: 1;。元素应始终具有某种可见形状，就像泄了气的气球。
工具提示与弹出层
- 后续工具提示跳过动画：第一个工具提示使用延迟加动画；后续工具提示（在已有提示打开时）应即时显示、无延迟。文档给出了
.tooltip的 transition、transform-origin 以及[data-starting-style]、[data-ending-style]、[data-instant]的样式示例，并说明 Radix UI 和 Base UI 通过 data-instant 属性支持此模式。 - 让动画感知原点：弹出层应从触发元素缩放，而非从中心缩放。默认
transform-origin: center;在多数情况下是错误的，应使用transform-origin: var(--transform-origin);。Radix UI 使用var(--radix-dropdown-menu-content-transform-origin)，Base UI 使用var(--transform-origin)。
速度与时长
- 保持动画快速：即使加载时间相同，转得更快的加载指示器也会让应用感觉更快；180ms 的下拉选择动画比 400ms 感觉更响应。规则是 UI 动画应保持在 300ms 以内。
- 不要为键盘交互添加动画：方向键导航、键盘快捷键每天重复数百次，动画会让它们感觉缓慢且脱节。永远不要为以下内容添加动画：方向键列表导航、键盘快捷键响应、Tab/焦点移动。
- 谨慎对待高频使用元素：悬停效果虽好，但如果一天触发多次，可能完全不加动画更好。指导原则是每天使用自己的产品，通过重复使用发现哪些动画会变得烦人。
悬停状态
- 修复悬停闪烁：当悬停动画改变元素位置时，光标可能离开元素导致闪烁。问题示例是
.box:hover { transform: translateY(-20%); }。解决方案是改为动画子元素：父元素.box内放.box-inner，对.box:hover .box-inner应用位移，并给.box-inner添加过渡。这样父元素的悬停区域保持稳定，而子元素移动。 - 在触摸设备上禁用悬停：触摸设备没有真正的悬停，手指意外移动会触发不需要的悬停状态。应使用
@media (hover: hover) and (pointer: fine)包裹悬停样式。文档注明 Tailwind v4 的 hover: 类会自动仅在设备支持悬停时应用。
触摸与无障碍
- 确保合适的点击区域：小按钮难以点按，可用伪元素在不改变布局的情况下创建更大的点击区域。最小点击目标为 44px（Apple 与 WCAG 建议）。文档给出了
@utility touch-hitbox的完整样式示例，通过::before伪元素设置min-height: 44px; min-width: 44px;等属性，并展示了在按钮上使用className="touch-hitbox"的用法。
缓动选择
- 进出场使用 ease-out：进入或退出的元素应使用 ease-out，快速起步带来响应感。示例为
.dropdown的 transform 与 opacity 过渡使用 200ms ease-out。ease-in 起步慢，不适合 UI；相同时长下由于运动集中在后段，会感觉更慢。 - 屏内移动使用 ease-in-out：已经可见、需要移动的元素应使用 ease-in-out，模拟类似汽车的自然加速与减速。示例为
.slider-handle使用transform 250ms ease-in-out。 - 使用自定义缓动曲线：内置 CSS 曲线通常太弱，自定义曲线能创造更有意图的运动。文档给出的资源为 easings.co。
视觉技巧
- 使用模糊作为后备方案：当缓动与时长调整无法解决问题时，添加轻微模糊来掩盖瑕疵。示例为
.button-transition同时过渡 transform 与 filter，在:active时应用transform: scale(0.97); filter: blur(2px);。模糊能弥合状态之间的视觉间隙，让眼睛看到更平滑的过渡，两个状态相互融合而非呈现为不同物体。性能提示：模糊保持在 20px 以下，尤其是在 Safari 上。
使用方式
文档建议将本指南作为实现动画时的检查清单，逐项对照常见场景（按钮反馈、工具提示、弹出层、悬停、触摸、缓动等）检查实现。文中提供了可直接参考的 CSS 代码片段与组件库（Radix UI、Base UI、Tailwind v4）相关说明。
适用场景
适用于前端界面开发中实现悬停效果、工具提示、按钮反馈、过渡动画，以及修复动画抖动、悬停闪烁、触摸设备误触发等问题。
限制
文档未提供关于收费、价格、平台支持范围或具体效果保证的信息。部分内容依赖特定组件库（Radix UI、Base UI）或框架（Tailwind v4）的特性，使用前需确认所用技术栈是否支持相应属性或类。