transitions.dev

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

开源 🏷️定价信息待确认 ✅ 目前可打开设计创意 🍴 复刻 306 🐛 待处理 14 👀 关注 15

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 6332

维护状态较活跃

是否开源开源

定价模式 🏷️定价信息待确认

项目预览

项目数据

分类设计创意

开发团队Jakubantalik

官网地址https://transitions.dev

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

定价模式🏷️定价信息待确认

价格说明定价信息待确认

访问状态✅ 目前可打开

是否开源是

开源协议NOASSERTION

主要语言HTML

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

GitHub 星标★ 6332

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

代码更新2026-11-08

仓库体积52.4 MB

本站数据更新2026-11-15

维护状态较活跃

收录时间2026-10-01

浏览次数2

项目介绍

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

Star 增长趋势

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

数据来源：GitHub API 逐日快照 · 收录于 2026-10-01 · 当前星标 ★ 6332

技术标签

design motion skill ui-design

使用教程

难度：入门约 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
```