Transitions.dev 是设计师 Jakub Antalik 开发的 UI 过渡动画库，将最常用的交互动效（下拉菜单、模态框、Toast 提示、骨架屏等）做成可直接复制的 CSS 片段，同时打包成 Claude Skill，安装后即可调用。
它解决了一个具体痛点：AI 生成界面时动画全靠即兴发挥，各组件动效风格不统一。 功能没问题，但产品的整体节奏感散了。
GitHub 仓库 Jakubantalik/transitions.dev 已有超过 2.2k stars，免费版提供 27+ 个动画。
- 官网：transitions.dev
- GitHub：github.com/Jakubantalik/transitions.dev
使用方式
Claude Skills 安装
一条命令即可安装：
npx skills add Jakubantalik/transitions.dev
安装后 AI Agent 就能识别这 27 个动画。比如让 Agent 给下拉菜单加动效，它不会临场编 CSS，而是直接调用预设的 menu dropdown 方案。
内置命令
Skill 内置了 4 个命令，覆盖从查阅到审查的完整流程：
transitions reveal：列出库中全部动画transitions apply：根据光标位置自动匹配合适的动画，确认后安装transitions review：扫描项目中的临时动画和硬编码时长，只报告不修改transitions refine：给硬编码值匹配对应的 motion token
review 和 refine 都是只读操作，扫完给你清单，改不改自己决定。
直接复制 CSS
不想用 AI Agent 的话，官网每个动画卡片都有复制按钮。CSS 片段是自包含的：变量定义在 :root，规则收在 t-* 前缀的 class 里，自带 prefers-reduced-motion 降级处理。粘进任何项目都能跑，不挑框架。
27 个动画覆盖高频场景
这个库的选品思路很务实——不追求炫技，27 个动画全是产品中常见的基础场景：
- 数字更新时的翻牌（Number pop-in）
- 通知角标的弹入（Notification badge）
- 两个图标在同一位置的切换（Icon swap）
- 列表页和详情页之间的左右滑动（Page side-by-side）
- 输入框报错时的抖动（Error state shake）
- 骨架屏加载完成后的交叉淡入（Skeleton loader and reveal）
- Tab 切换时跟着跑的胶囊指示条（Tabs sliding）
Motion Token 系统
除了动画片段，transitions.dev 还提供了一套 Motion Token 系统，用于统一管理项目中的所有动效参数：
- 时长：打开可以稍慢，关闭要干脆
- 缓动：不同场景使用不同的缓动曲线
- 位移和缩放：规范动画的运动幅度
- stagger 间隔：列表错开不能像排队进场那么拖沓
搭配 Polish skill（transitions polish）可检查开关时长、hover 进出、stagger 间隔等，并按用途推荐 token。
与其他动效 Skill 对比
动效方向的 Skill 还有几个：
- Emil Kowalski 的 Skills For Design Engineers：更像原则课
- GSAP 官方 Skill：服务复杂时间线
- ibelick/ui-skills：偏向无障碍和性能底线
transitions.dev 的差异在于：给的是参数已调好的成品动画，外加一套把项目动效收敛到统一标尺的 token 系统。
另外有 Pro 版，解锁 33+ 动画和 React、TypeScript 变体。免费版 27 个纯 CSS 版本已够用，React 组件多的话再考虑 Pro。
总结
动效一直是 AI 生成界面中最容易露怯的部分。布局和配色有大量训练数据兜底，但动效的分寸感很难从数据中学出来——因为好的动效恰恰是你注意不到的那种。
transitions.dev 的做法是绕过"让 AI 学会调动画"这个难题，直接给它一个调好的库和一套判断规则。
Agent 不需要有手感，它只需要认得场景、取对方案。对设计师来说，选哪个动画、要不要克制，这些判断还是你的——执行交出去，分寸留在自己手里。
