Motion.Lab 动效库

Motion.Lab 是一个包含 160 个精选前端动效的中文参考库，覆盖基础、文字、交互、高级四大类。每个动效均提供可直接复制的 HTML/CSS/JS 源码，并支持参数调节。

• 线上站点：https://motion-lab.vercel.app
• 实验室：https://motion-lab.vercel.app/lab
• 源码仓库：https://github.com/yangxu128/Motion.Lab

何时使用

当用户出现以下意图时调用本 Skill：

• "帮我给 XX 加个动画/动效"
• "有没有 XX 效果的代码"
• "落地页/按钮/卡片想要 XX 交互"
• "文字想要 XX 特效"
• "背景做个粒子/星空/流体效果"

使用流程

1. 检索：根据用户需求在下方清单中找到对应 id（可按关键词、分类、难度筛选）
2. 取码：直接从下方对应 id 的代码块复制 HTML/CSS/JS；或访问 https://motion-lab.vercel.app/lab/<id> 查看实时预览
3. 调参：每个动效列出可调参数（range/select），按需修改 CSS 自定义属性或 JS 变量
4. 落地：将 HTML 放入页面结构、CSS 放入样式表、JS 放入 <script> 或模块；参数通过 style="--key: value" 或 JS 变量传入

分类说明

• basic（基础）：进入/退出/循环动画，以纯 CSS 为主，最易集成
• text（文字）：文字特效，打字机、渐变、描边、3D 等
• interaction（交互）：悬停、点击、拖拽、滚动类交互动效
• advanced（高级）：Canvas、Three.js、GLSL 着色器、物理仿真等

动效清单与源码

基础（basic）— 42 个

ID	名称	英文名	难度	说明
fade-in	淡入	Fade In	★☆☆	元素从透明渐入到不透明,最基础的进入动画。
fade-in-up	上滑淡入	Fade In Up	★☆☆	元素从下方淡入,常用于列表项。
slide-in-left	左侧滑入	Slide In Left	★☆☆	元素从左侧滑入视口。
slide-in-right	右侧滑入	Slide In Right	★☆☆	元素从右侧滑入视口。
zoom-bounce	缩放弹跳	Zoom Bounce	★☆☆	元素放大入场,带弹跳回弹。
flip-x	水平翻转	Flip X	★★☆	元素绕 X 轴翻转入场。
rotate-in	旋转入场	Rotate In	★☆☆	元素从旋转状态回归原位。
pulse	脉冲	Pulse	★☆☆	元素持续放大缩小,吸引注意。
shake	摇晃	Shake	★☆☆	元素左右快速摇晃,常用于表单错误提示。
heartbeat	心跳	Heartbeat	★☆☆	双拍心跳节奏,模拟真实心跳。
marquee	跑马灯	Marquee	★★☆	内容从右向左无限滚动。
spinner	加载旋转	Spinner	★☆☆	经典加载指示器。
slide-up	上滑入场	Slide Up	★☆☆	元素从下往上滑入并淡入,通用入场动画。
slide-down	下滑入场	Slide Down	★☆☆	元素从上往下滑入,适合顶部 banner。
bounce-in	弹跳入场	Bounce In	★★☆	元素入场时多次反弹,有节奏感。
elastic-in	弹性入场	Elastic In	★★☆	入场时带有明显弹性回弹,生动有趣。
fade-out	淡出消失	Fade Out	★☆☆	元素持续淡出后回弹,适合循环演示。
scale-pulse	缩放呼吸	Scale Pulse	★☆☆	元素持续缩放形成呼吸效果,比 pulse 更夸张。
rotate-360	持续旋转	Rotate 360	★☆☆	元素持续 360 度旋转,无限循环。
swing	钟摆	Swing	★★☆	顶部固定,左右摆动,像钟摆一样。
jello	果冻	Jello	★★☆	元素呈现果冻般的扭曲抖动,俏皮可爱。
flash	闪烁	Flash	★☆☆	元素透明度快速闪烁,适合新消息/警告提示。
fade-in-down	上方淡入	Fade In Down	★☆☆	元素从上方淡入下滑,通用入场动画。
fade-in-left	左侧淡入	Fade In Left	★☆☆	元素从左侧淡入滑入,适合横向布局。
fade-in-right	右侧淡入	Fade In Right	★☆☆	元素从右侧淡入滑入,横向入场。
scale-in	缩放入场	Scale In	★☆☆	元素从较小尺寸缩放到原始大小入场。
scale-out	缩小归位	Scale Out	★☆☆	元素从较大尺寸缩小归位,有收束感。
flip-y	垂直翻转	Flip Y	★★☆	元素绕 Y 轴翻转入场,类似翻牌。
flip-in-3d	3D 翻转	Flip In 3D	★★☆	元素以 3D 透视翻转加缩放入场,立体感强。
wobble	摇摆	Wobble	★★☆	元素左右摇摆晃动,俏皮可爱。
tada	庆祝抖动	Tada	★★☆	元素放大并轻微旋转抖动,庆祝感强。
bounce-down	向下弹跳	Bounce Down	★★☆	元素从上方弹跳落下,带多次反弹。
slide-fade-corner	角落滑入	Corner Slide	★★☆	元素从左上角斜向滑入,带淡入。
skew-in	倾斜入场	Skew In	★★☆	元素以倾斜状态滑入归位,动感十足。
blur-in	模糊入场	Blur In	★★☆	元素从模糊状态渐变到清晰,柔和入场。
blur-out	模糊呼吸	Blur Pulse	★★☆	元素在清晰与模糊间循环呼吸,梦幻感。
grayscale-in	灰度入场	Grayscale In	★★☆	元素从灰度渐变到彩色,复古转彩色。
color-cycle	色彩循环	Color Cycle	★☆☆	元素背景色按 HSL 循环变化,霓虹感。
border-draw	边框画出	Border Draw	★★☆	边框按顺时针逐步画出,勾勒轮廓。
shadow-grow	阴影生长	Shadow Grow	★☆☆	元素阴影循环生长,产生悬浮呼吸感。
gradient-shift	渐变流动	Gradient Shift	★☆☆	渐变背景持续流动,色彩柔和过渡。
typewriter-cursor	光标打字	Typing Cursor	★★☆	带闪烁光标的打字效果,逐字输入循环。

基础源码

fade-in — 淡入（Fade In）

元素从透明渐入到不透明,最基础的进入动画。

参数：

• duration (时长): 范围 0.2–3（步长 0.1）s，默认 0.8
• delay (延迟): 范围 0–2（步长 0.1）s，默认 0

HTML：

<div class="fade-in">Hello</div>

CSS：

.fade-in { animation: fadeIn var(--duration, 0.8s) ease-out var(--delay, 0s) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

JS：

// Pure CSS — no JS needed

在线预览

---

fade-in-up — 上滑淡入（Fade In Up）

元素从下方淡入,常用于列表项。

参数：

• duration (时长): 范围 0.2–3（步长 0.1）s，默认 0.8
• distance (距离): 范围 10–80（步长 5）px，默认 20

HTML：

<div class="fade-in-up">Hello</div>

CSS：

.fade-in-up { animation: fadeInUp var(--duration, 0.8s) ease-out both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(var(--distance, 20px)); } to { opacity: 1; transform: translateY(0); } }

JS：

// Pure CSS

在线预览

---

slide-in-left — 左侧滑入（Slide In Left）

元素从左侧滑入视口。

参数：

• duration (时长): 范围 0.2–2（步长 0.1）s，默认 0.6

HTML：

<div class="slide-left">→</div>

CSS：

.slide-left { animation: slideLeft var(--duration, 0.6s) ease-out both; }
@keyframes slideLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }

JS：

// Pure CSS — no JS needed

在线预览

---

slide-in-right — 右侧滑入（Slide In Right）

元素从右侧滑入视口。

参数：

• duration (时长): 范围 0.2–2（步长 0.1）s，默认 0.6

HTML：

<div class="slide-right">←</div>

CSS：

.slide-right { animation: slideRight var(--duration, 0.6s) ease-out both; }
@keyframes slideRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

JS：

// Pure CSS — no JS needed

在线预览

---

zoom-bounce — 缩放弹跳（Zoom Bounce）

元素放大入场,带弹跳回弹。

参数：

• duration (时长): 范围 0.3–2（步长 0.1）s，默认 0.8

HTML：

<div class="zoom-bounce">●</div>

CSS：

.zoom-bounce { animation: zoomBounce var(--duration, 0.8s) cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes zoomBounce { from { transform: scale(0); } to { transform: scale(1); } }

JS：

// Pure CSS — no JS needed

在线预览

---

flip-x — 水平翻转（Flip X）

元素绕 X 轴翻转入场。

参数：

• duration (时长): 范围 0.3–2（步长 0.1）s，默认 0.8

HTML：

<div class="flip-x">↻</div>

CSS：

.flip-x { animation: flipX var(--duration, 0.8s) ease-out both; transform-origin: center; }
@keyframes flipX { from { transform: perspective(600px) rotateX(-90deg); opacity: 0; } to { transform: perspective(600px) rotateX(0); opacity: 1; } }

JS：

// Pure CSS — no JS needed

在线预览

---

rotate-in — 旋转入场（Rotate In）

元素从旋转状态回归原位。

参数：

• duration (时长): 范围 0.3–2（步长 0.1）s，默认 0.7

HTML：

<div class="rotate-in">★</div>

CSS：

.rotate-in { animation: rotateIn var(--duration, 0.7s) ease-out both; }
@keyframes rotateIn { from { transform: rotate(-180deg) scale(0.3); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }

JS：

// Pure CSS — no JS needed

在线预览

---

pulse — 脉冲（Pulse）

元素持续放大缩小,吸引注意。

参数：

• duration (周期): 范围 0.5–3（步长 0.1）s，默认 1.5
• intensity (强度): 范围 0.05–0.4（步长 0.05），默认 0.15

HTML：

<div class="pulse">●</div>

CSS：

.pulse { animation: pulse var(--duration, 1.5s) ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(calc(1 + var(--intensity, 0.15))); } }

JS：

// Pure CSS — no JS needed

在线预览

---

shake — 摇晃（Shake）

元素左右快速摇晃,常用于表单错误提示。

参数：

• duration (时长): 范围 0.2–1.5（步长 0.1）s，默认 0.5

HTML：

<div class="shake">!</div>

CSS：

.shake { animation: shake var(--duration, 0.5s); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

JS：

// Pure CSS — no JS needed

在线预览

---

heartbeat — 心跳（Heartbeat）

双拍心跳节奏,模拟真实心跳。

参数：

• duration (周期): 范围 0.5–3（步长 0.1）s，默认 1.2

HTML：

<div class="heartbeat">♥</div>

CSS：

.heartbeat { animation: heartbeat var(--duration, 1.2s) ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } }

JS：

// Pure CSS — no JS needed

在线预览

---

marquee — 跑马灯（Marquee）

内容从右向左无限滚动。

参数：

• duration (周期): 范围 5–30（步长 1）s，默认 12
• direction (方向): 选项 ["left","right"]，默认 left

HTML：

<div class="marquee"><span>Motion.Lab · 动效实验室 · </span><span>Motion.Lab · 动效实验室 · </span></div>

CSS：

.marquee { display: flex; gap: 32px; animation: marquee var(--duration, 12s) linear infinite; white-space: nowrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

JS：

// Pure CSS — no JS needed

在线预览

---

spinner — 加载旋转（Spinner）

经典加载指示器。

参数：

• duration (周期): 范围 0.3–2（步长 0.1）s，默认 0.8

HTML：

<div class="spinner"></div>

CSS：

.spinner { width: 32px; height: 32px; border: 3px solid rgba(0,0,0,0.1); border-top-color: var(--accent); border-radius: 50%; animation: spin var(--duration, 0.8s) linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

JS：

// Pure CSS — no JS needed

在线预览

---

slide-up — 上滑入场（Slide Up）

元素从下往上滑入并淡入,通用入场动画。

参数：

• duration (时长): 范围 0.2–2（步长 0.1）s，默认 0.6
• distance (距离): 范围 20–120（步长 5）px，默认 40

HTML：

<div class="slide-up">Slide Up</div>

CSS：

.slide-up { animation: slideUp var(--duration, 0.6s) ease-out both; }