ease-in 不能模拟真实重力掉落，因其三次贝塞尔曲线 cubic-bezier(0.42,0,1,1) 起始斜率为0、加速度不恒定，而自由落体位移∝t²需恒定加速度；拟合抛物线y=t²得到更接近的cubic-bezier(0.17,0.67,0.83,0.67)。
为什么 ease-in 不能直接模拟真实重力掉落
很多人试过用 transition: transform 0.5s ease-in 让元素“掉下来”，结果发现动画开头太慢、中间又突然提速，不像物体受重力加速下落——这是因为 ease-in 是三次贝塞尔曲线 cubic-bezier(0.42, 0, 1, 1)，它在起始阶段加速度并不线性，且缺乏真实的初速度和持续加速感。
真实重力下落位移 ∝ t²，而 CSS 缓动函数描述的是**归一化时间到归一化位移的映射**，不是物理运动方程。想逼近重力感，得让位移在时间上更贴近二次增长趋势。
-
ease-in开头斜率是 0，意味着初速度为 0，但加速度不恒定；真实自由落体初速可为 0，但加速度（g）恒定 → 位移曲线应更“向下弯” - 纯
ease-in动画常显得“迟滞起步”，尤其掉落距离短时，几乎卡在起点半拍 - 浏览器对
cubic-bezier()的插值是基于时间的，不是基于物理帧，所以不能靠调参数“解出重力公式”，只能拟合视觉惯性
用 cubic-bezier(0.17, 0.67, 0.83, 0.67) 更接近重力加速感
这个值不是随便凑的：它来自对抛物线段 y = t² 在 [0,1] 区间做三次贝塞尔近似拟合（控制点取自导数约束），实测在多数屏幕刷新节奏下，视觉上比 ease-in 更“沉”、更“有质量”。
直接替换即可：
.drop {
transform: translateY(-100px);
transition: transform 0.6s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.drop.active {
transform: translateY(0);
}
- 动画时间建议 ≥ 0.5s，太短会丢失加速过程，显得像弹跳而非坠落
- 若元素需从
opacity: 0同步淡入，opacity也应用同一缓动函数，否则“飘”和“沉”脱节 - 避免同时对
top和transform做动画——触发重排+重绘，卡顿明显；只用transform保证 GPU 加速
加一点“触底反弹”让重力感更可信
纯直线掉落缺乏物理反馈。真实物体落地会有微小回弹和阻尼，加一帧 10% 反向位移 + 快速衰减，就能显著提升重量感。
不用 JS，纯 CSS 也能做：
@keyframes drop-with-bounce {
0% { transform: translateY(-100px); }
70% { transform: translateY(0); }
90% { transform: translateY(10px); }
100% { transform: translateY(0); }
}
.drop.active {
animation: drop-with-bounce 0.7s forwards;
}
- 关键不是反弹高度，而是反弹发生的时机：70% 到达底部，90% 弹起，最后 10% 回稳，符合阻尼振荡直觉
- 别用
animation-timing-function: ease-out控制整段——它会让反弹变拖沓；分段靠关键帧位置控制节奏更精准 - 如果容器有
overflow: hidden，注意translateY(10px)可能导致元素短暂“穿出”，可加transform-origin: top或限制父容器 padding
移动端 Safari 的 cubic-bezier() 兼容要注意
iOS 13–15 对某些非标准贝塞尔值（如 y 值 > 1 或 linear，你写的 cubic-bezier(0.17, 0.67, 0.83, 0.67) 是安全的，但若自己调参，务必验证：
- y1 和 y2 必须在 [0, 1] 之间（iOS Safari 不支持超出范围的值）
- 测试时打开 Safari 开发者工具 → Elements → 查看 computed transition-timing-function 是否仍是你写的值
- 真机测试比模拟器可靠；部分 iPad OS 版本对小数精度敏感，写成
0.17, 0.67, 0.83, 0.67比.17, .67, .83, .67更稳妥
重力感本质是视觉预期管理，不是物理仿真。参数可以微调，但核心是让眼睛相信“这东西有质量、有速度、落地有反馈”——其它都是围绕这个打转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
