直接用translateY做跳跃显得“飘”是因为缺乏物理感：真实跳跃包含加速下落、触地压缩和反弹衰减，而纯线性或默认ease缓动无法体现蹬地爆发、顶点停顿和落地缓冲的三阶段节奏。
为什么直接用 translateY 做跳跃会显得“飘”？
因为纯线性或缓动的 translateY 位移缺乏物理感：真实跳跃有加速下落、触地压缩、反弹衰减。浏览器默认的 cubic-bezier(.25,.1,.25,1)（ease）太平滑，看不出“蹬地”和“弹起”的节奏。关键不是位移量，而是时间分布——前1/3时间快速上冲，中间停顿（顶点），后半段先快后慢下落并带微小二次反弹。
用 @keyframes 拆解三阶段跳跃节奏
把一次跳跃拆成「起跳→滞空→落地反弹」三个逻辑段，用 0% → 40% → 70% → 100% 四个关键帧控制，避免匀速运动：
@keyframes jump {
0% {
transform: translateY(0);
}
40% {
transform: translateY(-80px); /* 快速上冲 */
}
70% {
transform: translateY(10px); /* 落地瞬间压低，模拟缓冲 */
}
100% {
transform: translateY(0);
}
}- 40% 处设最大上移量，占比不到一半，制造爆发感
- 70% 不直接回 0，而是略低于原位（如
10px），模拟触地形变 - 最后 30% 时间用于回弹归位，自然收尾
动画时长和循环必须配对设置
单独写 @keyframes 不生效，需绑定到元素并配置播放参数。常见漏配项：
-
animation-duration建议设为0.6s～0.8s：短于 0.5s 显得急促，长于 1s 失去跳跃感 -
animation-timing-function必须用cubic-bezier自定义，例如cubic-bezier(0.2, 0.7, 0.4, 1.2)—— 出发段陡峭（快起），结束段超调（带弹） -
animation-iteration-count设为infinite才能持续跳；若只需一次，别忘加animation-fill-mode: forwards锁定终点状态
容易被忽略的物理细节：缩放与阴影同步
纯 translateY 只动位置，真实跳跃中身体会微缩（起跳绷紧）、触地略扁（缓冲）、离地瞬伸展。加一帧缩放可提升可信度：
立即学习“前端免费学习笔记（深入）”；
@keyframes jump {
0% {
transform: translateY(0) scale(1);
}
30% {
transform: translateY(-70px) scale(0.95); /* 起跳收缩 */
}
40% {
transform: translateY(-80px) scale(1.05); /* 顶点微伸展 */
}
70% {
transform: translateY(10px) scale(0.98); /* 触地压缩 */
}
100% {
transform: translateY(0) scale(1);
}
}同时搭配 box-shadow 动态变化：高位时阴影窄而淡，低位时宽而浓，强化立体感。这点常被跳过，但恰恰是“像不像”的分水岭。
