这是什么
Transitions.dev 是一个专为 UI 动效设计的 AI Agent 技能库，包含 43+ 个精心制作的 CSS 过渡动效。每个动效都配有可直接复制的 CSS 代码片段，并打包为可安装的 Agent 技能，让 AI 编程工具（如 Cursor、Claude Code、Codex 等）能直接在项目中应用这些动效。
该仓库由 jakubantalik 开发，在 GitHub 上已获得 4424 个 Star、188 个 Fork，目前有 8 个开放 Issue，社区活跃度较高。
适合谁
- 前端开发者：希望快速为项目添加专业动效，避免从零编写复杂 CSS。
- UI/UX 设计师：需要为设计稿添加动效参考，或验证动效的可行性。
- AI 编程工具用户：使用 Cursor、Claude Code、Codex 等工具，希望 AI 能自动应用高质量动效。
- 产品经理：需要快速原型演示，展示交互动效。
能做什么
Transitions.dev 提供了丰富的动效类型，包括：
- 卡片调整大小：平滑的卡片尺寸变化过渡。
- 数字弹出：带模糊和错落的数字翻转效果。
- 通知徽章：带弹簧弹出的对角滑动效果。
- 文本状态切换：带模糊的文本替换过渡。
- 菜单下拉：感知原点的开合过渡。
- 模态框开关：带缩放的模态框过渡。
- 面板展示：面板开合过渡。
- 页面并排：前进/后退的页面过渡。
- 图标切换：缩放和模糊的图标替换。
- 成功勾选：带淡入、旋转、模糊、Y 轴浮动和 SVG 路径绘制的确认图标。
- 头像组悬停：悬停头像弹起，相邻头像跟随并衰减。
- 错误状态抖动：验证错误时输入框抖动并自动恢复。
每个动效都提供独立的 CSS 片段，包含语义化的 CSS 自定义属性、命名空间为 t-* 的过渡规则，以及 @media (prefers-reduced-motion: reduce) 的降级保护，可直接粘贴到任何项目中。
使用前准备
- 安装 Node.js（建议 16+ 版本）以使用 CLI 工具。
- 准备支持 Agent 技能的 AI 编程工具（如 Cursor、Claude Code、Codex）或通用 Agent 环境。
- 无需 API 密钥，免费动效可直接使用；Pro 动效需通过无密码浏览器登录解锁。
安装方法
作为 Agent 技能安装：
npx skills add Jakubantalik/transitions.dev使用 CLI 直接添加动效：
# 添加单个免费动效
npx transitions-dev add card-resize
# 添加所有免费动效
npx transitions-dev add --free
# 查看所有可用动效
npx transitions-dev list登录以解锁 Pro 动效：
npx transitions-dev login
npx transitions-dev add confetti-burst本地运行演示站点：
python3 -m http.server 8765然后打开 http://127.0.0.1:8765/ 查看。
使用示例
在 AI 编程工具中，你可以这样使用：
- 安装技能后，让 AI 扫描代码库中缺失、卡顿或不一致的 UI 动效。
- AI 会根据 transitions.dev 的动效配方自动修复或优化。
- 也可以手动从技能库中选择动效，复制 CSS 片段应用到项目中。
例如，在 Cursor 中，你可以输入：“为这个通知徽章添加一个带弹簧效果的弹出动效，参考 transitions.dev 的 notification badge 样式。” AI 会自动生成相应的 CSS。
风险与注意事项
- 动效性能：虽然动效经过优化，但在低端设备上大量使用可能影响性能，建议按需使用。
- 可访问性：动效已包含
prefers-reduced-motion降级，但请确保在关键交互中提供替代方案。 - Pro 内容：部分高级动效需要登录解锁，登录流程使用设备流，无需在终端暴露 API 密钥，但需注意浏览器授权安全。
- 版本更新：技能由
index.html自动生成，仓库更新后建议重新构建以获取最新动效。