核心是用cubic-bezier()逼近弹簧衰减运动：推荐cubic-bezier(0.25, 0.46, 0.45, 0.94)实现平滑前冲+微回弹+快速收敛，禁用y值越界曲线防穿模，搭配0.45s时长与非零scale初始态，避免opacity或scale(0)隐藏，并按需启用translateZ(0)硬件加速。
用 transform + transition-timing-function: cubic-bezier() 模拟物理回弹
纯 CSS 实现“回弹阻尼感”的核心不是靠 JS 控制帧，而是用高阶贝塞尔曲线逼近弹簧运动衰减。浏览器原生 transition-timing-function 不支持 bounce 关键字（那是 Web Animations API 的事），但 cubic-bezier(0.17, 0.67, 0.83, 0.67) 这类参数能很好模拟前冲+小幅回弹+收敛的效果。
常见错误是直接套用网上搜来的“弹性”曲线，比如 cubic-bezier(0.5, 1.6, 0.5, 1) —— 它在 y 轴超出 [0,1] 范围，会导致元素“穿模”（比如弹出时先缩到负尺寸再弹出），视觉上反而像卡顿或错位。
- 推荐起手参数：
cubic-bezier(0.25, 0.46, 0.45, 0.94)（平滑前冲 + 微回弹，收敛快） - 若要更强阻尼感：用
cubic-bezier(0.34, 1.56, 0.64, 1)，但必须搭配transform: scale(0.95)初始态，否则第一帧会跳 - 务必禁用
transform: scale(0)作隐藏态——它会让子元素完全不可见且无法触发 :focus，改用opacity: 0; visibility: hidden;配合scale(0.98)等非零值
为什么不能只靠 @keyframes + bounce
@keyframes 里写 bounce 是无效的——CSS 标准中没有这个关键字。有人误把动画库（如 Animate.css）的 class 当成原生能力，结果发现加了没反应。真正可用的是 animation-timing-function 支持的贝塞尔函数，或通过多关键帧手动写出回弹过程，但后者难调、体积大、且无法和 transition 自然衔接。
典型翻车场景：用 @keyframes pop { 0% { transform: scale(0.8); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } —— 缺少衰减控制，看起来是“硬弹”，没有阻尼收敛感；而且 50% 帧的放大值若超过 1.12，人眼会明显感知“过冲”失真。
- 真实阻尼需要至少 3 次幅度递减：1.0 → 1.08 → 1.02 → 1.00
- 用
@keyframes写这种细节，代码行数翻倍，且无法响应 show/hide 的动态时机 - 优先走
transition路线，仅当需要复杂路径（如带位移+旋转）时才考虑@keyframes+ 手动贝塞尔分段
will-change 和 transform: translateZ(0) 对回弹动画的影响
回弹动画本质是高频 transform 变化，不开启硬件加速会导致 iOS Safari 卡顿、Android 低帧率。但乱加 will-change: transform 有代价：内存占用升、滚动变涩、甚至触发渲染 bug（尤其在 modal 多层嵌套时）。
正确做法是“按需提升”，而非全局写死：
- 只在 modal 元素上加
will-change: transform，且仅在:target或.is-open类激活时设置（避免常驻） - 更轻量的替代：用
transform: translateZ(0)强制创建合成层，兼容性更好，无内存泄漏风险 - 切忌对
opacity单独设will-change——它不会触发 GPU 加速，纯属无效操作
移动端 Safari 的 transform-origin 偏移问题
在 iOS Safari 上，如果弹出框用 transform-origin: center 但容器本身有 border-radius 或 overflow: hidden，回弹过程中会出现边缘像素撕裂或闪烁——这是 WebKit 的合成层裁剪 bug。
解决方式不是去掉圆角，而是微调锚点位置：
- 把
transform-origin: center改成transform-origin: 50% 50% 0（显式声明 z 轴） - 或者给弹窗加
backface-visibility: hidden，强制启用背面缓存 - 若弹窗含文字，确保
-webkit-font-smoothing: antialiased已设，否则回弹时字体描边会抖动
最易被忽略的一点：回弹动画的“阻尼感”不只来自曲线，更依赖动画时长与初始速度的匹配。transition-duration: 0.45s 配 cubic-bezier(0.25, 0.46, 0.45, 0.94) 是较稳组合；低于 0.35s 会像抽搐，高于 0.6s 则像慢放，人脑就识别不出“回弹”而只觉得“慢”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
