transitions.dev

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

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

开源 unknown 设计创意
访问官网 ↗ GitHub ↗ 文档 ↗
GitHub 星标 ★ 4451
维护状态 活跃
是否开源 是
定价模式 unknown

项目预览

项目数据

分类设计创意
开发团队Jakubantalik
所属国家
定价模式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. 1确认运行环境

    CLI 通过 npx 分发,需先安装 Node.js/npm;本地预览站点需 Python 3。README 未给出版本要求。

  2. 2查看可用过渡

    列出当前所有可用的过渡动画名称,先确认要添加哪一个。

    npx transitions-dev list
  3. 3添加单个免费过渡

    以 card-resize 为例,把对应 CSS 片段拉取到你的项目中,免费且无需账号。

    npx transitions-dev add card-resize
  4. 4添加全部免费过渡

    一次性拉取所有免费过渡的 CSS 片段,适合想先整体体验的场景。

    npx transitions-dev add --free
  5. 5登录解锁 Pro

    打开浏览器通过设备流确认登录码,终端里不需要 API key。

    npx transitions-dev login
  6. 6添加 Pro 过渡

    登录后拉取 Pro 版过渡,例如 confetti-burst 会同时获取 CSS 与 React 代码。

    npx transitions-dev add confetti-burst
  7. 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

下一篇:没有了!

同类项目推荐

open-design 开源

让 AI 代工做界面,本地跑完随手改

Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ L···

★ 98692 2026-08-09
Excalidraw 开源

开源虚拟白板协作工具

Virtual whiteboard for sketching hand-drawn like diagrams

★ 133243 2026-08-19
morph 开源

用数据直接生成设计、动画和交互可视化

Morph is a free and open-source tool for creating designs, animations or interactive···

★ 126 2026-08-09
ChatGPT-MidJourney-prompt 开源

输入一句话,AI帮你生成Midjourney完整提示词

This is a ChatGPT based prompt generation model for MidJorney. The purpose of this m···

★ 344 2026-08-09