cubic-bezier(0.2, 0.8, 0.4, 1)是安全起点，因前段缓启、中段加速、末段轻微过冲再回调，平衡可读性、跨端稳定性与视觉可信度；max-height需合理设限并配overflow: hidden，移动端需规避:active陷阱。
直接用 ease 或 ease-in-out 做不出弹性回弹——它们的动画进度被锁在 0–1 区间内，没法“过冲再回调”。 真正的弹性必须靠自定义 cubic-bezier() 打破这个限制，让动画曲线短暂超出目标值，再拉回来。
为什么 cubic-bezier(0.2, 0.8, 0.4, 1) 是安全起点
这个值不是最弹的，但平衡了可读性、跨端稳定性和视觉可信度：
- 前两个参数
(0.2, 0.8)让动画起步稍缓，避免突兀启动 - 后两个参数
(0.4, 1)使末段轻微过冲（第四个参数 = 1 表示刚好触达，略大于 1 才真正过冲；这里取 1 是为兼容性兜底） - 比
cubic-bezier(0.175, 0.885, 0.32, 1.275)更克制，用在菜单或按钮上不会晃眼、干扰焦点 - Safari 和 Chrome 渲染一致，不依赖
will-change也能跑稳
max-height 动画必须配合理上限值
想对高度做弹性过渡，height: auto 完全无效——浏览器无法计算终点。改用 max-height 是折中解法，但数值很关键：
- 设太小（如
max-height: 100px）：内容多时被截断，尤其图片加载延迟后更明显 - 设太大（如
max-height: 9999px）：数值跨度大，cubic-bezier曲线失真，回弹感变弱甚至消失 - 推荐估算：
max-height: calc(1.5em * 6 + 1.5rem)（按最多 6 行文字 + 内边距） - 必须加
overflow: hidden，否则过冲阶段内容会短暂溢出
移动端 Safari 的 :active 陷阱
iOS Safari 默认不触发 :active，除非满足以下任一条件：
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 元素有
cursor: pointer - 绑定空
onclick事件（如onclick="void(0)"） - 设置
tabindex="0"并用:focus:not(:active)曲线救国（仅限键盘/部分触控）
但 :focus:not(:active) 在 iOS 上支持不稳定，**别把它当主力方案**。真要可靠回弹，JS 控制临时 class 更稳：
button.addEventListener('click', function() {
this.classList.add('is-pressed');
setTimeout(() => this.classList.remove('is-pressed'), 320);
});注意：CSS 中 transition-duration 设 300ms，setTimeout 就得略长（如 320ms），否则 class 移除瞬间动画被截断。
容易被忽略的渲染细节
弹性动画不是调对贝塞尔曲线就完事了：
- 别写
transition: all——颜色、边框等属性共用同一缓动，会抖动或错位 - 只对具体属性过渡：
transition: transform 300ms cubic-bezier(...), max-height 300ms cubic-bezier(...) - 用
transform-origin控制缩放/拉伸锚点：菜单展开要用top center，否则像从中间炸开 - 动画开始前加
will-change: transform（结束立刻移除），否则 iOS Safari 可能撕裂
最后提醒一句：弹性不是越弹越好。一次交互里出现两次以上明显回弹，用户会感知为卡顿或 bug。微弹（cubic-bezier(0.3, 1.2, 0.5, 1)）比强弹（cubic-bezier(0, 0, 0.5, 2)）更适配大多数 UI 场景。
