Transitions.dev

Transitions.dev 是 Jakub Antalik（GitHub 用户 Jakubantalik）做的网页转场动效库，同名网站 transitions.dev 上每张卡片演示一种界面小动画，比如弹窗开合、下拉菜单、提示气泡、数字跳动和输入出错时的抖动，都能复制成一段独立的 CSS。这个仓库把它们打包成 Agent Skill，本条介绍其中三个核心 Skill。transitions-dev 负责装整段转场，SKILL.md 的速查表列了三十多种：你让 AI 给某个组件加动画，它先看界面元素该配哪一种，用一句话提出建议，你确认后再把 CSS、HTML 挂钩和必要的一小段 JavaScript 放进项目，每段都保留“减弱动态效果”（prefers-reduced-motion）的设置；也可以先让它扫一遍项目，列出哪些地方适合加动效，这一步不改文件。transitions-polish 专门调已经在动的东西，检查时长、位移、缩放、模糊和缓动（easing）五个方面，再对照开合快慢、悬停进出、错开（stagger）和延迟的规则，先列清单，你确认后才改。transitions-ui-generation 让任意一块界面看起来像 AI 正在现场生成：先按元素本身的结构画出点状线框，再从上到下揭出真实界面，可以加上生成日志和步骤文字，适合 AI 产品、发布页和演示视频。它特别的地方在于三个 Skill 共用一套动效标记（motion tokens），对照时先判断这个动作是做什么用的，再找用途相同的标记，用途对不上的数值就留着不动；SKILL.md 举的例子是 300 毫秒的弹窗关闭会改成 150 毫秒，因为两者都是“弹窗关闭”。

适合谁：用 Claude Code、Cursor、Codex 这类 AI 编程工具做网站和 App 界面，想让弹窗、菜单、按钮这些小动作更顺、更统一的设计者和前端开发者；不写代码的读者用不上。

使用前提：README 给的安装命令是 npx skills add Jakubantalik/transitions.dev，说同一条命令会装上 transitions-dev 和 transitions-ui-generation；transitions-polish 的说明写明可以和 transitions-dev 一起装，也可以单独装；也可以把对应的 skills 子文件夹复制到 AI 工具读取 Skill 的目录。transitions-ui-generation 会往你的项目里放一个 JavaScript 和一个 CSS 文件，不依赖其他库，在浏览器端运行。三个 Skill 的说明都没有要求账号或 API key，扫描和提建议的步骤不改文件，真正改代码前会先问你。Skill 内容是英文。许可要看清楚：动效和 Skill 用的是作者自定的 Transitions.dev 许可，个人和商业项目都能用、能改、能随自己的产品发给用户，公司使用免费部分也不需要买计划；限制是不能把这套动效库本身（或其中相当大的一部分）重新打包、转售，或发布成与它竞争的转场库、动效包、动画套件。仓库里的工具部分（命令行工具、Agent、Refine 等）才是 MIT 许可，所以整个仓库不能当成“MIT 开源”；网站的设计、品牌和 Logo 不在任何一份许可里。仓库也不是全部免费：Pro 动效和付费的 Motion Agent 功能要买计划，Pro 计划只给个人自己付费使用（含自由职业接单），公司或团队使用，或者由公司付款、报销的，要买按人头计的 Business 计划；Pro 动效要用官方命令行工具在浏览器里登录后下载，登录凭证保存在本机。想把这些动效放进自己出售或免费发放的模板、主题、UI 套件，主 LICENSE 要求持有 Pro、Business 或 Lifetime 计划，并满足它列出的条件。仓库里还有 Refine 实时调节工具（会往正在运行的网页里注入面板脚本、启动本地中继，加 --llm 参数又没装 Cursor 命令行时，会用 curl 管道接 bash 的方式执行远程安装脚本）、Motion Agent 托管修复（会把项目扫描和修复信息发到 api.transitions.dev，需要许可 key），以及自动建 GitHub 工作流、开 PR 的 CI 功能，这些本站没有核查推荐。

以上根据项目公开说明整理，本站没有实际测试。