直接用 transform: scale() 做拉伸是错的，因其等比放大无张力感；应使用 scale3d(x, y, 1) 实现横向延展+纵向微压，并配合四阶段关键帧与定制贝塞尔曲线模拟真实橡皮筋效果。
直接用 transform: scale() 做“拉伸”是错的——它只会等比放大整个盒子，没有张力感，视觉上像吹气球，不是拉橡皮筋。
为什么不能只用 scale() 模拟拉伸
浏览器对 scale() 的渲染是整体变换，文字、边框、圆角全被同比例撑开。实际弹性拉伸需要横向延展 + 纵向微压（或反之），体现形变张力。iOS Safari 和安卓 Chrome 对 scaleX()/scaleY() 的硬件加速支持不稳定，容易触发软件渲染掉帧；而 scale3d(x, y, 1) 是更稳妥的选择，z 固定为 1 即可获得一致的 GPU 加速。
- 别写
transform: scaleX(1.4) scaleY(0.7)，部分 Android 4.4 以下会卡顿 -
scale3d(1.35, 0.65, 1)是实测可用的起始拉伸比例，横向+35%、纵向-35%，有体积感 - 如果按钮含图标，记得给
<svg>或<i>加flex-shrink: 0，否则会被压缩变形
@keyframes stretch 的关键帧节奏怎么设
生硬的弹性动画只有“开始→最大→结束”三帧；真正有弹性的 stretch 必须包含过冲、回抽、微调、缓停四阶段，总时长控制在 0.6–0.8s 最自然。100% 帧必须严格回到 scale3d(1, 1, 1)，但不能提前归位——否则最后一帧会“啪”地收住，失去余韵。
- 25% 达到最大拉伸：
scale3d(1.35, 0.65, 1) - 35% 横向回抽 + 纵向鼓起：
scale3d(0.9, 1.1, 1)（模拟橡皮筋绷紧后反向震荡） - 55% 回调未完全复原：
scale3d(1.15, 0.85, 1) - 75% 微调逼近原始比例：
scale3d(1.03, 0.97, 1) - 所有关键帧必须写在同一行
transform声明里，避免多次合成层更新
cubic-bezier() 该选哪组值
默认 ease 或 ease-in-out 完全不适合 stretch 场景——它们太顺滑，没有“绷紧→释放→微颤”的物理反馈。推荐使用 cubic-bezier(0.34, 1.56, 0.64, 1)，它开头快、中间慢、结尾带轻微过冲再回稳，最接近真实橡皮筋拉伸。但注意：iOS 13 以下 Safari 会降级为 ease，如需强兼容，改用 ease-in-out + 把过渡时间从 0.6s 延长到 0.72s 更稳妥。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要混用 timing function：
transition: transform 0.6s ease-in-out, border-radius 0.6s cubic-bezier(...)——浏览器只取第一个函数 - y 坐标可以超出 [0,1] 范围（如 1.56），这是实现弹性过冲的数学基础
- 调试时用 Chrome DevTools 的动画检查器拖动时间轴，实时观察曲线拐点是否符合预期
真正难的不是写出那几行 scale3d 和贝塞尔值，而是让拉伸节奏和按钮内容尺寸、字体大小、padding 值形成协同——比如文字短、字大、padding 小的按钮，拉伸时极易文字溢出或边缘发虚，这时得靠 min-width 锚定基线宽度，而不是硬调动画参数。
