cubic-bezier 是实现弹跳效果的关键，因其可通过超调（y>1）和反向拉扯（y<0）模拟弹簧回弹；需分段设置多段关键帧与对应贝塞尔曲线，并注意 GPU 加速、交互禁用和 fill-mode 等细节。
为什么 cubic-bezier 是实现弹跳效果的关键
CSS 动画本身不提供“弹跳”这类物理反馈，但
允许你自定义缓动曲线，模拟弹簧回弹的加速度变化。关键在于让动画在结束前“冲过头”，再折返几次衰减——这正对应贝塞尔控制点中
值超出
范围的行为（比如
表示超调，
表示反向拉扯）。
常见误区是直接套用网上搜到的“弹跳 cubic-bezier”，结果动画卡顿或只弹一次：这是因为没匹配动画时长、位移幅度和衰减节奏。
怎么写出一个真正可用的弹跳 cubic-bezier 曲线
标准弹跳不是单段贝塞尔能完成的，得拆成多段关键帧 + 每段配不同
。最简可行方案是 4 步弹跳（主弹 + 2 次衰减 + 静止）：
第一段（0% → 60%）：快速下落 + 超调 →
第二段（60% → 85%）：第一次回弹衰减 →
第三段（85% → 95%）：小幅二次反弹 →
第四段（95% → 100%）：缓慢归位 →
或
注意：
属性里多个动画用逗号分隔，时间偏移（如
）必须严格递增，否则会覆盖。
立即学习
“
前端免费学习笔记（深入）
”；
用 CSS @property 实现更可控的弹性动画（Chrome 110+）
如果目标
浏览器
支持，
可以把自定义属性变成可动画的“物理量”，配合
缓动（目前仅 Chrome 支持）：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
先注册可动画的自定义属性：
再用
驱动（它比
更接近真实弹簧）：
四个参数直接影响弹感：增大
更硬、减小
更晃。但目前兼容性差，仅作进阶选项。
容易被忽略的三个细节
必须搭配
或启用 GPU 加速（如加
），否则高频弹跳在低端设备上掉帧明显
弹跳动画若用于按钮点击反馈，要加
在动画中临时禁用交互，避免连续触发
使用
是必须的，否则动画结束后元素会“啪”地跳回初始位置，破坏弹性感
真实项目里，弹跳不是越复杂越好。多数场景下，2–3 次衰减 + 总时长 ≤ 0.7s 的效果最自然。过度追求物理精确反而让用户觉得“卡”或“油腻”。
cubic-bezier()y[0, 1]y > 1y < 0cubic-bezier()cubic-bezier(0.34, 1.56, 0.64, 1)cubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.4, 0, 0.6, 1)ease-outcubic-bezier(0.2, 0, 0, 1)@keyframes bounce {
0% { transform: translateY(0); }
60% { transform: translateY(40px); }
85% { transform: translateY(10px); }
95% { transform: translateY(3px); }
100% { transform: translateY(0); }
}
.bounce-element {
animation: bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
bounce 0.8s 0.8s cubic-bezier(0.4, 0, 0.2, 1),
bounce 0.8s 1.6s cubic-bezier(0.4, 0, 0.6, 1),
bounce 0.8s 2.4s cubic-bezier(0.2, 0, 0, 1);
animation-fill-mode: forwards;
}
animation0.8s@propertyspring()@property --y-pos {
syntax: '';
inherits: false;
initial-value: 0px;
} spring()cubic-bezier.spring-bounce {
--y-pos: 0px;
transform: translateY(var(--y-pos));
animation: spring-bounce 0.6s ease forwards;
}
@keyframes spring-bounce {
to { --y-pos: 40px; }
}
/ 关键：spring() 作为缓动函数 /
.spring-bounce {
animation-timing-function: spring(1, 100, 10, 0);
}
spring(mass, stiffness, damping, velocity)stiffnessdampingtransform: translateY()will-change: transformtransform: translateZ(0)pointer-events: noneanimation-fill-mode: forwards