Transitions.dev：18个高质量CSS动效，一个命令装进你的AI编码助手

做过UI设计的同学都知道，动效这块是最费时间的。做一个下拉菜单的展开动画，要调 timing、easing、距离，AI 生成出来经常是生硬的「啪」一下就没了，改个两三次才能看。

最近挖到一个专门解决这个问题的开源项目，叫 Transitions.dev。它把 18 种最常用的 UI 动效做成了可复用的 CSS 片段，每个动效都有在线演示，点一下按钮就能复制代码，用到自己的项目里。

这个 Skill 强在哪？

首先，它不是那种「给你一堆 Demo 欣赏」的仓库。每个 Transition 卡片下方都有一个 Copy 按钮，点一下复制出来的是完整、自包含的 CSS 代码块——包含语义化的 CSS 变量、命名空间在 t-* 下的过渡规则，还有 @media (prefers-reduced-motion: reduce) 的无障碍守卫。粘贴到任何项目里直接就能用，不用担心跟现有样式冲突。

其次，它的动效质量很高——不是简单的 transition: all 0.3s 那种敷衍玩法。比如 Modal open/close 做了缩放 + 模糊的入场，Notification badge 是斜向弹入 + 弹簧感，Success check 竟然还带 SVG 路径绘制动画。这些动效放在实际产品里完全拿得出手。

作为 AI Agent Skill 怎么用？

这是它最骚的地方——可以直接安装到 AI 编码助手里：

• 一行命令装好：npx skills add Jakubantalik/transitions.dev
• 然后直接跟 AI 说「给我加个卡片缩放动效」，AI 就会从库里找到对应的 Transition 代码注入到你的项目里
• 想手动挑着加？用 CLI：npx transitions-pro add card-resize，不用开浏览器

更绝的是它的 Refine 工具：一行命令 npx transitions-refine live，就能在你的运行中 App 上注入一个实时调参面板，点哪个动效就能看到时间、距离、缓动的实时预览——相当于给 AI 配了一个动效示波器，边调边看，不用反复生成代码。

适合谁用？

• 前端开发者：快速拿到高质量 CSS 动效，不用自己调参
• 产品设计师：想给设计师演示「这个动效在代码里是什么样」，直接 COPY 就完了
• AI 工程师：在给 AI Agent 装 Skill 时多装这一个，生成的界面动效立刻提升一个档次

18 个免费 Transition 涵盖了最常见场景：卡片缩放、数字弹入、通知徽章、Modal、侧边面板、页面切换、图标替换、成功确认动画……说实话，日常工作里 80% 的动效需求这一套就够了。

项目地址放下面，2.6k stars + 117 forks，口碑很不错，最近更新也很勤（昨天还有 commit）。设计师和前端同学值得收藏。

https://github.com/Jakubantalik/transitions.dev

GitHub: https://github.com/Jakubantalik/transitions.dev