transitions.dev

复制即用的精致 UI 过渡，AI 帮你按场景生成动效

transitions.dev 是一个面向 UI 动效的开源资源库，核心提供 43 种以上精心打磨的过渡动画，并配套一个可嵌入工作流的 AI 动效技能（skill）。它解决的是前端与设计团队在实现界面过渡时反复手写 CSS/JS 动画、风格不统一、效果粗糙的问题。项目把常见交互场景（弹窗、抽屉、列表增删、页面切换等）的过渡方案沉淀为可直接复用的代码片段与规范，同时通过 AI agent 能力让开发者用自然语言描述需求即可生成或调整动效，降低动效设计门槛。技术上以 HTML 为主，便于直接预览与复制，适合作为设计系统或组件库的动效参考层。整体定位偏设计与开发协作，强调“开箱即用的精致动效”而非通用动画引擎，适合追求细节质感的中小型项目快速落地。

开源 unknown 设计创意

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 4451

维护状态活跃

是否开源是

定价模式 unknown

项目预览

项目数据

分类设计创意

开发团队Jakubantalik

所属国家

官网地址https://transitions.dev

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

定价模式unknown

价格说明定价信息待确认

访问状态

是否开源是

开源协议

主要语言HTML

技术栈/模型design,motion,motionskill,product,skill,ui-design,ux,ux-design

GitHub 星标★ 4451

30天Star增速

HF 下载量

上线时间2026-04-21 00:00:00

最近更新2026-09-30 00:00:00

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-10-01

浏览次数0

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

正在加载星标数据…

使用教程

难度：入门约 10 分钟部署方式：命令行工具 7 步

环境要求

Node.js 与 npm（npx 命令依赖）
Python 3（用于本地预览静态站点）
可访问现代浏览器（预览页面与设备流登录）

安装与启动步骤

1确认运行环境

CLI 通过 npx 分发，需先安装 Node.js/npm；本地预览站点需 Python 3。README 未给出版本要求。
2查看可用过渡

列出当前所有可用的过渡动画名称，先确认要添加哪一个。
```
npx transitions-dev list
```
3添加单个免费过渡

以 card-resize 为例，把对应 CSS 片段拉取到你的项目中，免费且无需账号。
```
npx transitions-dev add card-resize
```
4添加全部免费过渡

一次性拉取所有免费过渡的 CSS 片段，适合想先整体体验的场景。
```
npx transitions-dev add --free
```
5登录解锁 Pro

打开浏览器通过设备流确认登录码，终端里不需要 API key。
```
npx transitions-dev login
```
6添加 Pro 过渡

登录后拉取 Pro 版过渡，例如 confetti-burst 会同时获取 CSS 与 React 代码。
```
npx transitions-dev add confetti-burst
```
7本地预览站点

在项目目录启动静态服务器，然后浏览器访问 http://127.0.0.1:8765/ 查看卡片索引页。
```
python3 -m http.server 8765
```

如何确认成功

执行 npx transitions-dev list 能列出过渡名称；浏览器打开 http://127.0.0.1:8765/ 能看到卡片索引页。

常见问题

Q：免费过渡需要注册账号吗？

A：不需要。npx transitions-dev add card-resize 或 npx transitions-dev add --free 可直接使用，无需账号与 API key。

Q：Pro 过渡怎么获取？

A：先执行 npx transitions-dev login，通过浏览器无密码设备流确认，再执行 npx transitions-dev add confetti-burst 拉取 Pro 的 CSS 和 React。

Q：终端里需要配置 API key 吗？

A：不需要。Pro 通过设备流登录解锁，README 明确说明终端里不放 API key。

Q：复制出来的 CSS 能直接用吗？

A：可以。每个卡片复制的是自包含片段，含 :root 变量、t-* 命名空间类以及 prefers-reduced-motion 守卫。

注意事项

复制出的 CSS 片段自带 :root 自定义属性、t-* 命名空间类与 prefers-reduced-motion 媒体查询守卫。
免费过渡无需账号；Pro 过渡需登录后从认证 API 获取。
transitions-pro 是旧包名，会转发到 transitions-dev，本身不含付费源码。

核心亮点

内置 43+ 种成品过渡，覆盖弹窗、抽屉、列表等高频交互，可直接复制使用
提供 AI 动效 skill，能用自然语言描述需求生成或调整过渡，降低动效实现门槛
以 HTML 为主，预览直观、接入成本低，适合作为设计系统动效参考层

不足之处

以 HTML 示例为主，缺少针对 React/Vue 等主流框架的官方封装与类型定义
AI skill 的具体工作流与集成方式依赖文档说明，社区生态和长期维护待观察

适用场景

为后台管理系统快速补齐弹窗、抽屉、列表增删的过渡动效
设计系统或组件库需要一套统一、可复用的动效规范与代码片段
独立开发者用自然语言让 AI 生成符合场景的界面过渡效果

替代项目

animate.css、Framer Motion、GSAP

项目介绍

transitions.dev 是设计创意领域的开源项目，由 Jakubantalik 开发，是 2026 年新上线的项目。

在全站 13,465 个收录项目中，它的 GitHub 星标数（4,451）位列前 10%，在设计创意分类的 165 个项目里位列前 9%。

项目目前处于活跃维护状态，最近一次代码更新于 2026-09-30。

它主要面向的使用场景是：为后台管理系统快速补齐弹窗、抽屉、列表增删的过渡动效。同类可对比的替代方案包括 animate.css、Framer Motion、GSAP。

上一篇：baoyu-design

下一篇：没有了！