Modern UI Motion Reference

119 production-ready animation effects across 13 categories.

GitHub

加载与等待

Spinner

圆环缺口旋转

CSS

Dots Pulse

三点依次脉冲

CSS

Skeleton Shimmer

骨架屏 + 光扫

CSS

Progress Bar

横条进度填充

CSS

Circular Progress

环形进度描边

SVG

Breath Pulse

呼吸感缩放

CSS

Skeleton Pulse

骨架明暗交替

CSS

Spinner Dots

圆点围环依次高亮

CSS

Wave Bars

音频波形跳动

CSS

Typing Indicator

聊天输入中提示

CSS

Hourglass Rotate

沙漏翻转等待

SVG

Rose Two

双瓣玫瑰曲线

SVG

Rose Three

三瓣玫瑰曲线

SVG

Lemniscate

伯努利双纽线

SVG

按钮与点击反馈

Press Scale

按下缩小松开回弹

CSS

Ripple

点击处扩散波纹

JS

Success Check

成功打勾动画

SVG

Error Shake

失败左右抖动

CSS

Submit Loading

缩圆 + spinner

JS

Hover Glow

悬浮边缘发光

CSS

Bounce Tap

弹跳点击反馈

CSS

Fill Progress

长按填充确认

JS

Confetti Button

点击庆祝粒子爆发

JS

文字与数据

Hello World!

Typewriter

逐字打出 + 光标

CSS
Designishowit

Fade Up Words

逐词淡入上升

CSS
0

Number Counter

数字从 0 滚动到目标

JS
重点内容高亮

Text Highlight

荧光笔划过文字

CSS
Breaking News·Motion Ref Updated·119 Modern Effects·Breaking News·Motion Ref Updated·119 Modern Effects·

Ticker

无限循环滚动字幕

CSS
MOTION

Scramble Text

字符打散重组

JS
0
5
:
0
0

Flip Counter

翻牌计数器

CSS
Shimmer Effect

Shimmer Text

渐变光扫过文字

CSS
12,345

Number Pop-in

数字逐位弹入带模糊

CSS
Colorful

Gradient Text

渐变色流动文字

CSS

弹层与浮层

确认删除？
OK

Modal

弹窗 scale + overlay

CSS

Bottom Sheet

从底部滑上来

CSS
Select
Option A
Option B
Option C

Dropdown

向下展开菜单

CSS
Tooltip content

Popover

锚点气泡弹出

CSS
操作成功

Toast

轻提示滑入

CSS
网络中断

Alert Slide

顶部警告推入

CSS
点击触发菜单
编辑
复制
删除

Context Menu

右键菜单弹出

JS
Hover me
Delayed tooltip

Tooltip

悬停延迟显示，离开即隐

CSS
Drawer Content
Settings / Filters

Drawer

侧滑抽屉面板

CSS
Search... Cmd+K
Open File
Run Build
Settings

Command Palette

Cmd+K 命令面板弹窗

JS

导航与转场

Page A
Page B

Page Slide

新页面从右推入

CSS
Tab 1
Tab 2

Fade Switch

淡入淡出切换

CSS

Shared Element

列表项展开为详情

CSS
HomeSearchProfile
Tab Content

Tab Slide

指示条滑动切换

CSS

Sidebar Push

侧栏推入主内容

CSS
Old View
New View

View Transition

圆形扩散视图过渡

CSS
A
B
C
D
E

Dock Nav

Mac 风格悬停放大导航

CSS

表单与输入

Focus Ring

聚焦边框高亮

CSS
Email

Label Float

标签上浮变小

CSS

Validation Shake

校验失败抖动

CSS

Toggle Switch

开关滑块切换

CSS
I agree

Checkbox

打勾描边动画

SVG
A
B
C

Radio Select

内圆点弹出选中

CSS

Search Expand

图标展开为输入框

CSS

OTP Input

逐位输入自动跳转

JS
60

Range Slider

滑块拖拽选值

JS
2
3
4

Step Indicator

多步骤进度指示器

JS

滚动驱动

Scroll Reveal

滚入视口时淡入

JS

Progress Indicator

阅读进度条

CSS
Header (sticky)

Content line 1

Content line 2

Content line 3

Content line 4

Content line 5

Content line 6

Content line 7

Sticky Shrink

吸顶缩小导航

CSS
第一行文字逐行第二行高亮显示第三行渐次点亮

Line Reveal

逐行文字高亮

CSS

Image Reveal

clip-path 揭示图片

CSS

图标与标识

Hamburger / Close

三线变叉号

CSS

Icon Swap

图标交叉切换

CSS

SVG Draw

路径描边绘制

SVG
3

Badge Bounce

角标弹跳出现

CSS

Logo Entrance

描边 + 填充入场

SVG
▼

Arrow Flip

箭头旋转 180°

CSS

Morphing Icon

图标路径平滑变形

SVG

Heart Like

爱心点赞动画

CSS

Copy Check

复制成功打勾

CSS

Bell Shake

通知铃铛摇摆

CSS

轮播与列表

Slide 1
Slide 2
Slide 3

Carousel Slide

轮播横向滑动

CSS
A
B
C

Card Stack

卡片堆叠翻页

CSS
Item 1
Item 2
Item 3

List Add/Remove

点击添加/移除列表项

JS
Task A
Task B
Task C

Drag Reorder

拖拽排序动效

JS
Section 1
Accordion content here
Section 2
Another panel content

Accordion

手风琴展开折叠

CSS

Infinite Scroll

滚动到底加载更多

JS

Avatar Stack

悬停展开头像组

CSS
Archive
Delete
Swipe me (click)

Swipe Action

滑动显示操作按钮

CSS

状态切换

Theme Toggle

圆形扩散主题切换

CSS
Error — click to fix

Error → Recovery

错误到恢复过渡

CSS
User Name
展开后的详细信息内容区域

Expand Detail

摘要展开为详情

CSS
Online

Online Status

在线离线脉冲指示

CSS

Favorite Star

收藏星标弹性切换

CSS

Success / Fail

成功失败状态切换

CSS
New message arrived

Read / Unread

已读未读标记切换

CSS

氛围与背景

Gradient Flow

渐变背景缓慢流动

CSS

Glow Pulse

呼吸发光效果

CSS

Particles

粒子缓慢上升

SVG

Magnetic Cursor

元素被光标吸引

JS
Move cursor here

Glow Trace

光标跟随边框高光

JS
PREMIUM

Light Sweep

光线扫过表面

CSS
3D Card

3D Card Hover

透视跟随光标倾斜

JS

Scan Line

扫描线从上到下扫过内容

CSS

数据可视化

Bar Chart Rise

柱状图从底部升起

CSS

Donut Chart

环形图弧线绘制

SVG

Gauge Meter

仪表盘指针旋转

CSS

Sparkline Draw

迷你折线图描边

SVG
0
Active Users
+12.5%

Counter Card

统计卡片数字滚动

JS

Horizontal Bar Reveal

横向条形依次展开

CSS
70

Scrubber Line

拖动播放头取值

SVG

Radial Bars

多条进度环叠加

SVG

Scatter Pop

散点按分布弹入

CSS

Density Curve

平滑分布曲线对比

SVG

Pie Slice Reveal

少量占比扇区展开

CSS

Radar Sweep

多维评分多边形扩展

SVG

入场与退场

Fade In

透明到不透明

CSS

Slide Up

从下方滑入淡入

CSS

Scale In

缩放放大淡入

CSS

Spring In

弹性回弹入场

CSS

Stagger

多元素依次入场

CSS

Blur In

模糊到清晰淡入

CSS

Slide In

横向滑入淡入

CSS
Header
Expanded content

Collapse

高度折叠展开

CSS