css动画如何实现跳跃效果_通过@keyframes和translateY实现上下跳动

直接用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 动态变化：高位时阴影窄而淡，低位时宽而浓，强化立体感。这点常被跳过，但恰恰是“像不像”的分水岭。