用什么实现
CSS 做基础反馈，Motion 服务 React，GSAP 编排时间线，Three.js 构建 3D，Lottie 播放矢量动画，Rive 管理交互状态。
可观察 / 可调节 / 可复用
254个交互词条
种动效变体 ＋ 188 个设计实验
种动效变体 ＋ 188 个设计实验
CSS + JAVASCRIPT
01 — 动手调一调改变参数，观察差异
03 — 带走这段实现
下载 Demo ↓当前变体的真实代码，可下载为独立网页。
查看 HTML / CSS / JavaScript ＋
BEFORE YOU ANIMATE
先把四层分清楚。
工具、触发、动作、体验，各自回答一个问题。
什么时候开始
悬停、聚焦、点击、滚动或状态变化。相同的淡入，可以由完全不同的行为触发。
具体怎样运动
淡入、滑入、交错、裁剪、文字显现。描述方向、幅度、节奏，以及结束后的状态。
怎样帮助用户
让反馈清楚，阅读稳定。照顾键盘与触屏，尊重减少动效偏好，让重要信息始终可用。
UI、UX 和 Vibe coding，分别是什么？ ＋
UI / 用户界面：看得到、能操作的按钮、文字、色彩与布局。
UX / 用户体验：用户是否理解操作、得到反馈，并顺利完成目标。
Vibe coding：用自然语言与 AI 协作构建页面。明确描述触发、动作、参数和边界，能减少反复猜测。
中篇：怎样把多个动效组合成一句清楚的要求？ ＋
按「作用对象 → 触发方式 → 具体效果 → 结束与替代」描述，避免只要求“更高级”。下面四个组合对应本篇的实际 Demo。
背景的轻视差 ↗：用户滚动时，背景以较低速度移动，标题按正常速度经过；范围有限，手机减弱，减少动效时静止。
卡片交错进入 ↗ ＋ 悬停倾斜 ↗：卡片进入视口时依次出现；显示完成后再根据指针轻微倾斜，移出回正。不要让两个阶段同时争夺同一个 transform。
靠近按钮时磁吸 ↗：指针接近后视觉内容轻微靠拢，外部感应区域固定；离开弹簧回位，触屏改为按压反馈。
滚动推进图片序列 ↗：先预加载帧图，滚动距离映射为帧编号；向上滚动倒放，加载失败保留静态海报。
把多个动作，连成一次体验。
先打开作品，观察共享图片过渡；加入购物车后看结果反馈，再打开抽屉，最后返回列表。所有操作均为本地模拟。
把需求说清楚
在现有技术栈中实现商品浏览流程：点击卡片时，让同一张图片连续过渡到详情主图，返回时沿原路恢复。加入购物车先显示处理中，完成后更新数量并给出不抢焦点的成功提示。购物车从右侧进入，关闭后焦点回到触发按钮。快速操作取消旧任务；菜单支持点击和键盘，减少动效时取消大幅运动但保留结果反馈。先把每一步做清楚，再协调时长与顺序。
把看过的好动效，记下来。
记录操作和结果，比只收藏一张截图更有用。内容仅存在本次页面内存中；复制或下载后自行保存。
预览这份记录 ＋
填写上面的表格后，这里会显示纯文本记录。