关于 ui-animation
ui-animation 是一份 UI 动画设计与实现指南，面向构建和审查交互界面的开发者。它汇总动画时长、属性、无障碍、性能与动效顺序等规则，并提供示例参考。
主要功能
- 01动画时长与缓动规则
- 02限制动画属性以避免布局变化
- 03遵循减少动态效果偏好
- 04触屏设备与主题切换处理
- 05动画性能与可中断性建议
适用场景
- 01设计菜单和对话框的进入动效
- 02审查交互动画的无障碍支持
- 03减少动画导致的布局与性能问题
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/ui-animation确认已加载。
附带文件examples.md
详细介绍
UI 动画
核心规则
- 通过动画阐明因果关系，或增添精心设计的惊喜感。
- 保持交互快速（200-300ms；仅说明性动画可延长至 1s）。
- 切勿为键盘交互设置动画（方向键导航、快捷键响应、Tab/焦点）。
- 优先使用 CSS；仅在必要时使用 WAAPI 或 JS。
- 让动画可中断，并由输入驱动。
- 遵循
prefers-reduced-motion（减少或禁用动画）。
动画对象
- 对于移动和空间变化，仅对
transform和opacity设置动画。 - 对于简单的状态反馈，可以对
color、background-color和opacity使用过渡效果。 - 切勿为布局属性设置动画；切勿使用
transition: all。 - 避免在核心交互中为
filter设置动画；若无法避免，请将模糊值保持在 <= 20px。 - SVG：在
<g>包装元素上应用变换，并设置transform-box: fill-box; transform-origin: center。 - 切换主题期间禁用过渡效果。
空间与时序
- 将
transform-origin设置在触发点。 - 对于对话框/菜单，从大约
scale(0.85-0.9)开始；避免使用scale(0)。 - 错开显示的间隔 <= 50ms。
缓动默认值
- 进入动画和基于变换的悬停动画：
cubic-bezier(0.22, 1, 0.36, 1)。 - 移动：
cubic-bezier(0.25, 1, 0.5, 1)。 - 简单的悬停颜色/背景/不透明度变化：
200ms ease。 - 避免在 UI 中使用
ease-in（感觉很慢）。
无障碍
- 如果使用了
transform，请在prefers-reduced-motion下禁用它。 - 通过
@media (hover: hover) and (pointer: fine)在触屏设备上禁用悬停过渡效果。
性能
- 暂停屏幕外的循环动画。
- 仅在剧烈运动期间，且仅针对
transform/opacity，切换will-change。 - 在动画库中优先使用
transform，而不是位置属性。 - 不要使用 CSS 变量为拖拽手势设置动画。
参考
- 代码片段和实用技巧：examples.md
工作流
- 从核心规则开始，然后从 examples.md 中选择一个参考代码片段。
- 让动画发挥实际作用；遵循
prefers-reduced-motion。 - 审查时注明文件路径和行号，并提出具体的修复建议。
评论
支持 Markdown