Transitions.dev快速上手:43款免费UI过渡动画库,一条命令安装32个CSS转场【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.devTransitions.dev 是一个免费的UI 过渡动画库 UI motion AI agent工具集提供 43 款开箱即用的 CSS 过渡动画modal、toast、下拉菜单、骨架屏等。其中 32 款完全免费一条npx命令即可装进项目无需注册账号。为什么需要 UI 过渡动画库做过前端的人都经历过这种场景AI 生成的界面功能齐全但动画生硬、时长混乱、缓动函数五花八门。Transitions.dev 的解法是43 款手工调校的过渡动画每个都有独立演示页见 transitions/ 目录如 transitions/modal-open-close/零依赖纯 CSS 片段命名空间t-*隔离不污染你的样式♿自带无障碍保障每段代码都带prefers-reduced-motion降级AI Agent 技能 Refine 调优面板让 Cursor / Claude Code 直接会写「有品味的动画」一条命令安装 32 个免费 CSS 转场打开终端在你的项目里执行npx transitions-dev list # 查看所有可用过渡 npx transitions-dev add card-resize # 安装单个免费过渡即时生效 npx transitions-dev add --free # 一次性安装全部 32 个免费过渡命令会把配方写入项目的./transitions/目录可用--dir path指定。完整 CLI 说明见 cli/README.md全部免费清单定义在 cli/free-manifest.json。32 款免费过渡覆盖哪些场景场景包含的过渡动画弹层与导航Modal 开关、下拉菜单、侧边面板、Toast、Tooltip、手风琴文本与数字数字弹入、文字状态切换、文字逐行显现、Shimmer 流光文字、流式打字机卡片与列表卡片缩放、3D 倾斜悬浮、Banner 堆叠、头像组悬浮表单与反馈错误抖动、输入框溶解清空、成功打勾、复选框描边、点赞心形爆裂加载与状态骨架屏显现、矩阵点阵加载器、AI 思考状态、推理流、滚动计数器每款都配有一篇用法文档例如 cli/free/card-resize.md 会告诉你使用时机、HTML 挂载方式、可调变量时长、缓动以及完整 CSS。安装后的 CSS 长这样——粘贴即用.t-resize { transition: width var(--resize-dur) var(--resize-ease), height var(--resize-dur) var(--resize-ease); } media (prefers-reduced-motion: reduce) { .t-resize { transition: none !important; } }时长与缓动都来自语义化的 CSS 变量--resize-dur: 300ms等全局只需在:root定义一次多个过渡共享同一套运动 token。通用安装块独立放在 skills/transitions-dev/_root.css。解锁 Pro 过渡浏览器登录终端零密钥免费 32 款之外还有 confetti-burst、烟雾溶解删除等 Pro 过渡。Pro 采用无密码浏览器登录device flow终端不接触任何 API keynpx transitions-dev login # 打开浏览器确认一个短码 npx transitions-dev add confetti-burst # 拉取 Pro CSS React让 AI 直接学会写过渡Agent Skill这是 Transitions.dev 最有意思的部分——把整套过渡打包成可安装的 AI 技能你的编码 AgentCursor、Claude Code、Codex 等就能直接在你的项目里应用它们npx transitions-dev skill技能本体位于 skills/transitions-dev/包含 SKILL.md 主文件和 32 个分场景参考文档01-card-resize.md…32-banner-stacking.md。其中 SKILL.md 内置了决策规则比如「触发器 顶部悬浮小圆点 → 通知徽章」「表单校验错误 → 错误抖动」让 AI 面对模糊需求也能选对动画而不是瞎猜。配套还有Refine 实时调优面板refine/一条命令把你的运行中页面注入时间轴面板点击 RefineAgent 就会对照运动 token 给出时长/缓动建议实时预览、可一键回滚npx transitions-refine live # 注入面板 启动本地 relay npx transitions-refine stop # 移除注入的脚本详细流程与环境变量见 refine/README.md。本地运行演示站仓库本身就是演示站想本地看全部 43 款效果git clone https://gitcode.com/gh_mirrors/tr/transitions.dev cd transitions.dev python3 -m http.server 8765然后打开http://127.0.0.1:8765/index.html 上每张卡片都带「复制 CSS」按钮prototypes.html 还提供时长、距离、缓动的实时调参台。常见问题需要 Node 版本要求CLI 需要 Node ≥ 18见 cli/package.json。免费过渡要账号吗不需要add --free匿名可用只有 Pro 才走浏览器登录。能商用吗可以。许可允许在无限的个人与商业项目中自由使用、修改工具本身为 MIT唯一限制是不能把库本身当竞品二次分发详见 LICENSE。总结需求命令看清单npx transitions-dev list装单个免费过渡npx transitions-dev add 名称一次装全 32 个npx transitions-dev add --free装 AI 技能npx transitions-dev skill实时调优面板npx transitions-refine live如果你受够了「AI 生成的界面像 PPT」Transitions.dev 值得放进工具箱一条命令32 个经过调校的 CSS 过渡从此 modal 有呼吸、toast 有节奏、骨架屏有质感。【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.dev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考