菜单弹性展开可用cubic-bezier(0.68,-0.55,0.27,1.55)模拟回弹，配合@keyframes定义拉伸→超调→回稳三阶段，并用transform:scaleY()与opacity实现高效动画。
菜单展开时加弹性效果，核心是用 cubic-bezier 定义非线性缓动曲线，再结合 @keyframes 控制关键帧动画。纯 CSS 就能实现，无需 JS。
用 cubic-bezier 模拟弹性回弹
CSS 原生的 ease-in-out 或 spring()（部分浏览器支持）不够“弹”。更可靠的方式是手写一个近似弹性效果的贝塞尔曲线，比如：
这个值会让元素先“冲过头”（负的 y 值代表反向拉伸），再回弹到位，模拟弹簧感。你可以把它用在 transition 或 animation-timing-function 中。
配合 keyframes 实现完整弹性展开
仅靠 transition 只能做简单缩放/高度变化，要精细控制“拉伸→回弹→停稳”的节奏，得用 @keyframes：
立即学习“前端免费学习笔记（深入）”；
- 定义动画：从
scaleY(0)或height: 0开始，到scaleY(1.1)（超调），再回落到1 - 给关键帧配
cubic-bezier：比如第 0%→70% 用快出慢入，70%→100% 用带回弹的曲线 - 示例片段：
0% { transform: scaleY(0); opacity: 0; }
70% { transform: scaleY(1.15); opacity: 1; }
100% { transform: scaleY(1); opacity: 1; }
}
.menu-panel {
animation: elastic-expand 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
适配高度变化（避免固定 height）
如果菜单内容高度不固定，别直接 animating height（会因 auto 失效）。推荐方案：
- 用
max-height+overflow: hidden过渡（设一个足够大的最大值，如max-height: 500px） - 或改用
transform: scaleY()+origin: top，更高效且天然支持弹性 - 配合
opacity实现淡入，增强层次感
微调与兼容性提醒
弹性参数很敏感，多试几次：
– 负的第二个值（y1）越大，初始反向越强；
– 第四个值（y2）大于 1，回弹更明显；
– 动画时长建议 0.3–0.5s，太长显得拖沓，太短看不出弹性。
注意：IE 不支持 cubic-bezier 的负值或 >1 的值，可加降级 transition: all 0.3s ease-out。
基本上就这些 —— 弹性不是玄学，是可控的数学曲线 + 合理的关键帧节奏。
