关键参数是cubic-bezier(0.34, 1.56, 0.64, 1)，其中y1=1.56控制起始快速加速，y2=1压平末端模拟缓冲；需配合translateY(px)、微回弹关键帧及will-change优化。
用 cubic-bezier 模拟重力下坠的关键参数怎么选
纯 CSS 实现“有重量感”的下坠，核心不是加动画时长，而是让 transition-timing-function 或 @keyframes 中的 cubic-bezier 曲线逼近真实自由落体的加速度衰减过程——起始慢、中间快、末端急停但带一点回弹余量。
常见错误是直接套用 cubic-bezier(0.25, 0.46, 0.45, 0.94)（MDN 推荐的“ease-in-out”），它太对称，没有下坠的“沉”感；或者用 ease-in，又太生硬、像断电坠落。
- 真正可用的起点是
cubic-bezier(0.34, 1.56, 0.64, 1)：前两个值拉高起始斜率（模拟初速为0后快速加速），后两个值压平末端（模拟空气阻力+接触缓冲） - 如果需要更“重”，把第二项（
y1）提到1.7甚至1.9，但超过2.0会导致视觉跳变（曲线超出 [0,1] 范围，CSS 会 clamp，反而失真） - 千万别用
y1 > y2且差值过大（比如cubic-bezier(0.1, 2.0, 0.9, 0.1)），浏览器渲染会抖动，尤其在 Safari 上
transform translateY 配合 cubic-bezier 的实际写法
只靠 top 或 margin-top 位移会触发重排，卡顿明显；必须用 transform: translateY() 才能走合成层，保证 60fps。
典型场景：点击按钮后，一个卡片从当前位置“砸”到下方 80px 处并微微回弹。
立即学习“前端免费学习笔记（深入）”；
- 用
transition：给元素加transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);，再通过 JS 切换 class 添加transform: translateY(80px); - 用
@keyframes更可控：定义@keyframes drop { 0% { transform: translateY(0); } 70% { transform: translateY(85px); } 100% { transform: translateY(80px); } }，然后在animation-timing-function里配同款cubic-bezier - 注意：
translateY值别写成百分比（如100%），父容器高度变化时行为不可控；固定 px/rem 更稳
为什么加一点点回弹比完全停住更“有重力感”
真实物体落地不会戛然而止，总会因弹性形变产生微小反弹。CSS 里模拟这个，不是靠 JS 物理引擎，而是靠 timing function 的末端“过冲”+ 关键帧微调。
错误做法：用两个连续 animation（先下坠再回弹），时间衔接难，容易露马脚。
- 推荐做法：在关键帧 90% 处让位移略超目标值（比如目标 80px，90% 到 83px），100% 回到 80px，配合
cubic-bezier让后段减速变缓，自然形成“压一下再稳住”的错觉 - 如果想强化反馈，可在 95% 插入
transform: scaleY(0.98)，模拟触地瞬间轻微压缩，立刻恢复 —— 这比纯位移更有物理感 - 慎用
scaleY动画配大数值（如scaleY(0.8)），文字会糊，且在低分辨率屏上边缘锯齿明显
移动端和 Safari 的兼容性陷阱
cubic-bezier 在所有现代浏览器都支持，但 Safari 对超出 [0,1] 范围的 y 值（比如 y1=1.7）渲染不稳定：有时正常，有时首帧卡在起点不动，有时动画直接跳过。
- 实测安全上限：Safari 15+ 可稳定用到
y1=1.65，iOS 14 及更早建议 ≤1.5 - 绕过方案：不用超限
y1，改用两段动画——先cubic-bezier(0.22, 0.61, 0.36, 1)快速下坠 90%，再接一段cubic-bezier(0.42, 0, 0.58, 1)缓冲最后 10% - 别忘了加
will-change: transform;，尤其在 iOS 上，否则首次动画可能闪一下
