信息卡

一句话定位

一套精选 CSS 过渡动效的可视化合集（transitions.dev）：每个效果都能在线预览、一键复制可移植片段，并且被打包成 AI 编码工具可直接调用的 agent skill。

增速解读：为什么涨这么快

总星 3231、月增 904，增速比约 39%，属于设计资源类项目少见的快速起量。"手工调 transition 曲线"是前端人人痛过的活，而项目用三招制造了传播点：一是卡片式预览站让效果所见即所得，复制出来的代码自带 :root 语义变量与 prefers-reduced-motion 无障碍降级，专业度高；二是紧跟 skills 风潮，`npx skills add` 一条命令让 Cursor/Claude Code 直接掌握这批动效写法，踩中了"给 agent 发教材"的新兴赛道；三是配套 Refine 工具能把运行中应用的动画注入时间轴面板并对齐 motion tokens，形成从素材到调优的工具链闭环。免门槛观看 + 收藏型价值是其 star 结构的主体。

核心功能拆解

• 12+ 种交互动效分类：Card resize、Number pop-in（模糊交错）、Notification badge 弹簧弹入、Text states swap、位置感知的 Menu dropdown、Modal open/close、Panel reveal、Page side-by-side、Icon swap、Success check（SVG 路径描绘）、Avatar group hover 衰减跟随、Error state shake 自动恢复；skill 参考文件覆盖 18 种。
• 可移植 CSS：t-* 类命名空间组织规则，依赖精简。
• 无障碍内建：所有片段包含 @media (prefers-reduced-motion: reduce) 降级守卫。
• Agent skill 分发：SKILL.md + 18 个逐效果参考文档 + _root.css 通用样式块，由 index.html 构建脚本自动生成保证一致性。
• CLI 分发：npx transitions-pro add/list，免费项无需账号，Pro 版经浏览器 device flow 登录解锁 React 支持。
• Refine 配套工具：npx transitions-refine live 向应用注入时间轴面板，--llm 参数可接 LLM 建议，不注入时也可在 IDE 内跑 /refine live。
• prototypes.html 实时调参练习场与 example.html AI 输出对比演示。

架构与技术栈浅析

仓库主体是纯静态站点：index.html 主展示页内嵌 PROTO_TEMPLATES 模板与 :root { --pX-* } 变量块，build/extract.mjs 从中重新渲染 skills 目录全部文件，npm run build 即完成"源站→skill"的单向生成链，无需框架与构建工具链。浏览器端动画仅用原生 CSS/WAAPI 思路实现，几乎无 JS 运行时负担。

安装与环境要求

零依赖：本地浏览 `python3 -m http.server 8765` 后访问 http://127.0.0.1:8765/ 即可；CLI 需要 Node.js 环境。

快速上手示例

python3 -m http.server 8765        # 浏览合集站
npx skills add Jakubantalik/transitions.dev   # 安装到你的 AI 编码工具
npx transitions-pro list           # 查看 CLI 可拉取项
npx transitions-pro add card-resize  # 复制一份卡片段落到项目

进阶使用要点

• 让 agent 使用 skill 时明确说"用 transitions.dev 的 XX 效果"，配合 SKILL.md 命中率更高。
• 改动风格应改 index.html 源模板后 npm run build 重建，勿手编 skills 下生成物。
• Refine live 注入的是临时 script 标签，stop 命令移除，适合现有大项目渐进接入。
• Pro 登录走终端验证码 device flow，不存在 API key 泄露面。

典型应用场景

• 为仪表盘/落地页快速挑选数字翻牌、成功打勾等微交互。
• 用 AI 编码工具批量替换旧 UI 的生硬 hover/focus 效果。
• 团队统一动效 token 规范的起点库。
• 前端教学演示 transition 各属性组合效果。

同类生态位对比

同类有 Animista、Easings.net、Open Props：Animista 海量但偏随机生成、Open Props 是通用变量库，transitions.dev 的差异在于场景化命名 + 预览站 + agent skill 三位一体，主打"能被 AI 正确复现"。注意许可证未标注，商用集成前宜向作者确认授权范围。

资源导航

在线体验：https://transitions.dev/ ；仓库：https://github.com/Jakubantalik/transitions.dev ；配套 CLI 包 transitions-pro 与 transitions-refine 均经 npx 调用。