transitions.dev

收录理由

Transitions.dev 把真实 Web 应用里反复出现的 CSS 过渡效果收拢到了一起：卡片缩放、模态框开合、菜单下拉、通知角标、输入框报错抖动，这些常见交互都能在站点上直接看到演示。每个效果都附带一段自包含的 CSS 代码，用语义化的自定义属性、带命名空间的类名，还内置了 prefers-reduced-motion 适配，复制到任何项目里就能用，不用连带引入演示页的标记或尺寸。命令行工具能直接把某个过渡拉进你的工程，同一套配方也打包成了可安装的 agent 技能，Cursor、Claude Code、Codex 这类 AI 编程工具可以直接调用。配套的 Refine 工具会在运行中的应用里注入一个实时面板，让编码代理把选中的动效对齐或替换成库里的令牌。想要统一、精致的 UI 动效又不想手写关键帧，这里是个很快的起点，把动效工作交给编码助手也顺理成章。