cubic-bezier(0.47, 0, 0.74, 0.71) 近似模拟重力下落中先加速后趋匀速的物理节奏，起始斜率平缓（初速≈0）、结束斜率>1（末段保留动量），需配合足够位移、合理时长、阴影缩放及 forwards 填充才显真实重力感。
为什么用 cubic-bezier(0.47, 0, 0.74, 0.71) 模拟重力下落
这个贝塞尔值不是凭空来的，它近似模拟了真实物体在重力作用下先加速、后受空气阻力趋于匀速的运动节奏。对比 cubic-bezier(0.25, 0.46, 0.45, 0.94)（常见“缓入缓出”）或 ease-in-out，它的起始斜率更平缓（y1 = 0），意味着初速度接近零；结束斜率仍大于1（y2 = 0.71），说明末段仍有明显向下动量——这正是“没完全落地前还带着坠势”的关键。
注意：它本身不包含反弹或触地停顿，只是下落过程。要完整表现“掉落+触底”，必须配合位移终点、动画填充模式和可能的后续关键帧。
如何用 @keyframes 配合该贝塞尔实现自然下落
直接把 cubic-bezier(0.47, 0, 0.74, 0.71) 塞进 animation-timing-function 是常见误区——它只控制时间曲线，不定义起点终点。必须明确位移路径：
- 起始位置建议设为
transform: translateY(-200px)（或用top/bottom，但需配合position） - 终点位置必须是目标容器内的实际落点，比如
transform: translateY(0)（相对自身初始位置） - 务必设置
animation-fill-mode: forwards，否则动画一结束就跳回原位 - 避免同时写
top和transform，会触发 layout + paint，影响性能
示例片段：
@keyframes drop {
from { transform: translateY(-150px); }
to { transform: translateY(0); }
}
.falling-box {
animation: drop 0.8s cubic-bezier(0.47, 0, 0.74, 0.71) forwards;
}
为什么加了贝塞尔还是显得“轻飘飘”？检查这几个点
重力感弱，往往不是贝塞尔错了，而是上下文没配齐：
- 动画时长太短（
）：人眼来不及感知加速度变化，建议 0.7–1.2s 区间试调 - 位移距离过小（如只掉
20px）：缺乏空间感，至少100px起步才容易看出“坠落”趋势 - 元素没有视觉重量：纯色小方块很难有重力联想，加
box-shadow: 0 8px 16px rgba(0,0,0,0.2)或轻微缩放（scale(0.98)到scale(1)）能强化“压下去”的暗示 - 父容器未设
overflow: hidden：若元素从可视区上方掉落，起始位置超出父容器，且父容器没裁剪，就会看到“突然出现”，破坏连贯性
想加触地反弹？别硬改贝塞尔，分阶段做
cubic-bezier(0.47, 0, 0.74, 0.71) 只负责下落段。反弹需要另一段动画，且时机要卡准：
- 用
animation-delay错开第二段动画，延迟值 ≈ 第一段动画时长 - 反弹段推荐
cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似ease-in-out），模拟弹性回弹 - 反弹高度建议是原高度的 20%–40%，再逐次衰减（需 JavaScript 控制多阶或用多个
@keyframes） - 纯 CSS 实现两阶反弹已较复杂，三阶以上强烈建议用 GSAP 或交由 JS 时间轴管理
真正难的不是贝塞尔参数，而是让位移、时长、阴影、缩放、甚至微小的倾斜（rotateX(1deg)）协同给出“有质量的物体正在下坠”的整体印象——单靠一个 timing-function 搞不定这事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
