这是一个网页动画技法的交互参考图鉴，每张卡片展示一种有专有名词的动效及其实时演示；分入场、循环、鼠标交互、文字、背景、进阶编排六类。
入场 · 加载时播放 / 划过重播
交错
Stagger
多个元素按固定间隔依次入场。
弹性回弹
Overshoot (Spring)
冲过目标值再回落，模拟弹性。
预备动作
Anticipation
发力前先反向蓄势。
跟随与重叠
Follow-through
尾随元素延迟跟上并回稳。
描边生长
Line-drawing
路径沿描边逐渐画出。
Reveal
遮罩擦除
Wipe (mask reveal)
从一侧扫过显形。
Hello_
打字机
Typewriter
逐字敲出，带闪烁光标。
Focus
虚化聚焦
Blur-in
由模糊过渡到清晰。
Open
幕帘开合
Curtain (clip split)
两片面板向两侧分开露出内容。
循环 · 持续播放
挤压拉伸
Squash & stretch
触底压扁再回弹。
呼吸脉动
Breathing (Pulse)
缓慢缩放与透明度往复。
悬浮循环
Idle floating
轻微上下漂浮。
URBAN FOLDING · URBAN FOLDING ·
跑马灯
Marquee
内容无缝横向滚动。
慢推
Ken Burns
缓慢缩放加平移，往复。
骨架微光
Shimmer (Skeleton)
高光条横向扫过占位块。
流光边框
Border Glow
高光沿边框循环流转。
鼠标交互 · 跟随光标 / 离开复位
磁吸
Magnetic
按光标偏移平移，离开回弹。
视差
Parallax
远中近层按光标以不同倍率移动。
点击迸发
Click Spark
点击后向四周迸发火花。点一下试试。
聚光跟随
Spotlight
光斑跟随光标照亮局部。
文字动效 · 持续播放（借鉴 React Bits）
Gradient
渐变流光
Gradient Text
渐变色在文字内横向流动。
Shiny
微光扫字
Shiny Text
一道高光在文字上反复扫过。
Split
逐字浮现
Split Text
拆成单字按序淡入。
DesignMotionVibeDesign
词语轮播
Rotating Text
一组词垂直滚动切换。
DECODE
字符解码
Scramble / Decrypt
乱码逐位收敛成目标词。
Glitch
故障文字
Glitch Text
RGB 错位抖动的故障质感。
128
数字递增
Count Up
数字从 0 缓动递增到目标值。
背景动效 · 持续播放（借鉴 React Bits）
极光
Aurora
柔光色块缓慢漂移交融。
圆点阵
Dot Grid
点阵上一团光晕游走点亮。
网格流动
Grid Motion
等距网格持续平移。
浮尘粒子
Particles
细小粒子漂浮游动。
波浪
Waves
多层波形横向错速流动。
涟漪
Ripple
同心圆环由中心扩散淡出。
光束
Beams
斜向光束依次扫过。
进阶编排 · 借鉴 Motion.dev
独立变换
Independent Transforms
同一元素上 x/y/旋转/缩放各自独立合成。
滚动联动
Scroll-linked
进度随滚动值实时联动填充。
原生手势
Gestures (hover / press)
悬停放大、按下回缩，接近原生手感。
布局动画
Layout Animation
在两种排布间平滑迁移位置。
弹簧物理
Spring Physics
按弹簧阻尼冲过目标再收敛。
退场动画
Exit (AnimatePresence)
元素移除时先播离场再消失。
动值派生
Motion Values
一个驱动值派生出旋转 / 透明等多路输出。
拖拽
Drag
可拖动 + 边界约束，松手弹性回位。拖一下试试。
关键帧
Keyframes
一个属性给一串值依次经停过渡。
惯性滑行
Inertia
抛出后按速度衰减滑行到停。
共享布局
Shared Layout
高亮块在选项间平滑迁移（layoutId）。