最可靠方式是用@keyframes bounce定义关键帧，需显式匹配初始transform状态、加animation-fill-mode:forwards保持终态、选cubic-bezier(0.28,0.84,0.42,1)时序，并确保元素有定位上下文。
直接用 @keyframes bounce 定义关键帧最可靠
浏览器对 @keyframes 的支持非常成熟，不需要 polyfill；只要关键帧逻辑合理，就能复现真实弹跳的“压缩→触底→回弹→停稳”过程。重点不是帧数多，而是 30%、45%、75% 这几个节点的位移和缩放组合——比如 30% 必须同时达到 translateY(0) 和最大 scale(1.15)，否则没有“砸下去”的力感。
常见错误是起始帧写成 transform: scale(1)，但元素本身已有 transform: translateY(-20px) 初始样式，结果动画第一帧会跳变。解决办法：起始关键帧必须显式匹配初始状态，例如 0% { transform: translateY(-20px) scale(0.9); }。
animation-fill-mode: forwards 不加就白写
弹跳动画播完后，元素默认会瞬间恢复到未动画前的 transform 状态（比如突然回到顶部），因为 CSS 动画只在播放期间接管样式。加了 animation-fill-mode: forwards 才能让最后一帧的 transform: translateY(0) scale(1) 持续生效。
注意两个限制：
- 只对单次动画（
animation-iteration-count: 1）有意义；设成infinite时它无效 - 如果同时用了
animation-direction: alternate，终点状态可能变成倒播的最后一帧（即 0%），导致停在压缩态而非自然回弹态
timing-function 选 cubic-bezier(0.28, 0.84, 0.42, 1) 而非 ease-out
ease-out 太线性，收尾太快，缺乏“余震”感；而这个贝塞尔曲线（常用于 bounce 效果）在末段减速更缓、带轻微过冲，配合关键帧里的负向位移（如 45% 的 translateY(-8px)），才能模拟弹簧回弹的真实节奏。
实操建议：
- 动画时长控制在
0.5s–0.7s之间：太短像抽搐，太长失去“弹”的即时反馈 - 避免和
transition混用同一属性（如同时对transform设transition和animation），CSS 会以 animation 为准，但可能引发渲染冲突 - 若需响应点击触发，用
element.style.animation = 'bounce 0.6s cubic-bezier(...) forwards'，别用 class 切换再监听animationend——后者在快速连点时容易堆积动画
元素必须有明确的定位上下文
transform 动画依赖于元素自身的坐标系，但如果父容器是 static 且子元素没设 position，translateY 可能受文档流影响，出现意外偏移或抖动。
稳妥做法：
- 给动画元素设
position: relative或absolute - 确保父容器没有
overflow: hidden且裁切了弹跳路径（比如translateY(-30px)起跳时被截掉） - 如果元素内含文字或图片，避免用
font-size或width/height做动画——重排开销大，缩放抖动明显；专注用transform: scale()+translateY()
最易被忽略的是：动画结束后，若后续 JS 修改了该元素的 transform（比如平滑滚动后手动设 transform: translateY(100px)），会覆盖 forwards 的状态，导致“弹完又跳回去”。这时候得先清空内联 style 或重置动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
