弹性回跳
Elastic Bounce
别名:弹性回跳果冻效果回弹动画弹簧动效Q弹效果
这是什么
元素到位后不是稳稳停住，而是带一两次越过后回弹的振荡， 像有弹性地"Q 一下"。 给界面注入物理感和俏皮感， 常用于成功状态、奖励时刻或品牌化入场。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 成功、奖励、升级等正向关键时刻
- 品牌调性活泼，需要记忆点
- 拖拽松手后的回弹落位
✕ 不适用场景
- 高频操作按钮（每次都弹，很快变烦）
- 严肃场景（支付、医疗、法律）
- 弹跳幅度过大（超过元素尺寸 10% 显得失控）
常见形式
过冲回落
Overshoot
cubic-bezier(0.34, 1.56, 0.64, 1) 一次过冲，最简
果冻抖动
Jelly
keyframes 缩放 1→1.2→0.9→1 连续振荡
拖拽回弹
Spring drag
松手后带回弹归位，物理感最强
实现要点
cubic-bezier(0.34, 1.56, 0.64, 1)@keyframes overshoottransform-origin: center最简法用带 y>1 的 cubic-bezier(0.34, 1.56, 0.64, 1)（ease-out-back）让过渡末段越过终点再回来； 多次振荡用 keyframes 显式写缩放序列。 transform-origin 保持居中， 幅度控制在元素尺寸 10% 以内； 尊重 prefers-reduced-motion 直接落到终态。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目成功/奖励时刻添加弹性回跳动效。 先检查现有动效令牌与缓动变量，避免私加曲线。 要求： - 过冲幅度 ≤ 元素尺寸 10%，总时长 ≤ 600ms - 只用于低频正向时刻，不挂在常规按钮上 - transform-origin 居中，不影响布局 - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用户按下按钮、卡片等可点击元素时，元素轻微缩小（通常 0.95～0.98）， 松开后弹回。一个几十毫秒的细节，让界面"手感"立刻从网页变成实体按键。
动效相似概念鼠标靠近按钮时，按钮像被磁铁吸住一样朝光标方向偏移一小段距离， 离开后弹性归位。偏移量按光标与按钮中心的距离计算，通常限制在 8～20px。 一种高"手感"的桌面端彩蛋交互，常出现在作品集与创意官网。
动效相似概念完成关键动作后从一点爆出彩色纸屑飘落，用一次性高能量庆祝"做成了"。 只在里程碑出现：提交成功、任务完成、订阅达成—— 正因为稀有，才有庆祝的分量。
动效相似概念用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件应用于