Transitions.dev：可复制的 AI 代理 UI 动效库

是什么 Transitions.dev 是 Jakub Antalik 发布的网页 UI 转场集合。原推文称新增后共有 21 个 transition，可复制 CSS 或 React 代码，也能通过 npx skills add ... 作为 Claude、Cursor、Codex 的技能使用；页面按 Essential、AI Agents、Effects、Texts 等方向组织卡片。

核心设计 它把状态变化做成可观察、可复用的动效配方：下拉菜单由按钮形态变成菜单表面，Accordion 用 grid 行高与 chevron 变化表达展开收起，3D tilt 通过指针姿态和 glare 强化空间反馈。站点还覆盖卡片 resize、文本与数字变化、toast、modal、skeleton、shimmer、拖放等常见产品状态，降低从静态界面到可用交互的落差。

关键洞察 价值不只是动画示例，而是把设计意图编码为 agent 可调用的实现资产。工程师能快速试用、复制并改造，编码代理也获得了更具体的动效参照。页面中的性能讨论提醒，blur、mask、filter 与 displacement 链可能触发重绘和 CPU 计算；将视觉遮罩改写为静态底层加 transform 移动的 curtain，更接近合成路径。

边界与风险 它更像高质量模式库，而非完整设计系统。复制代码仍需核对组件语义、键盘与屏幕阅读器行为、减少动效偏好、触控适配和浏览器性能；看起来顺滑不能替代产品情境与可维护性评估。