纯CSS可模拟橡皮筋效果：用transform:scale()配合自定义cubic-bezier(0.68,-0.55,0.27,1.55)关键帧，实现先快后慢放大、先慢后快收缩+轻微过冲，时长0.4–0.6s，非等比缩放更真实。
用 transform: scale() + @keyframes 模拟橡皮筋拉伸反弹效果
纯 CSS 实现不了物理引擎级的弹性，但能靠关键帧控制缩放节奏，骗过眼睛——核心是让放大过程「先快后慢」，收缩时「先慢后快」，再叠加一点延迟和循环微调。
常见错误是直接写匀速 scale(1.5) → scale(1)，结果像弹簧，不是橡皮筋。橡皮筋的关键在于「非线性变速」+「轻微过冲」（比如缩到 0.98 再弹回 1）。
- 用
cubic-bezier(0.6, 0, 0.4, 1)替代ease-in-out：它更接近真实弹性缓动，开头加速猛、结尾减速柔 - 动画总时长建议 0.4–0.6s；过短显得僵硬，过长失去“瞬时拉扯”感
- 别只动
scaleX：单向拉伸太假，scale(1.3, 1.1)这类非等比缩放更能模拟横向拉长+纵向微压缩
animation-timing-function 必须自定义贝塞尔曲线
浏览器默认的 ease 或 ease-out 都不够“弹”。橡皮筋反弹需要更强的惯性表现，必须手写 cubic-bezier()。
实测有效的组合：cubic-bezier(0.68, -0.55, 0.27, 1.55) —— 负的 y1 和大于 1 的 y2 允许动画短暂“过冲”，这是反弹感的来源。
立即学习“前端免费学习笔记（深入）”；
- 不要复制网上泛用的「弹性缓动」参数，很多是为下拉刷新设计的，拉伸场景要更陡峭的起始斜率
- 如果元素有边框或阴影，记得加
transform-origin: center，否则缩放会偏移锚点，看起来像在滑动 - 在 Safari 上，
cubic-bezier()超出 [0,1] 范围可能失效，可降级为steps(1, end)+ 多关键帧手动控制
避免在 flex/grid 容器里直接动画 width 或 height
想“拉长”元素，第一反应常是改 width，但这是性能陷阱：触发重排，卡顿明显，且无法做出平滑反弹。
真正该动的是 transform，它走合成层，GPU 加速，还支持精准的缓动控制。
- 绝对不要对
display: grid子项用width动画——网格轨道会重算，动画撕裂感极强 - 如果父容器用了
flex-shrink: 0，子元素transform: scale()不会影响布局流，这是优势 - 注意：
transform动画时，若元素内有position: absolute子元素，它们的定位基准仍是原始尺寸，不是缩放后尺寸
移动端点击触发动画时的兼容性坑
在 iOS Safari 或部分安卓 WebView 里，:active 状态不触发 CSS 动画，或者延迟明显。不能依赖伪类直接驱动。
正确做法是用 JS 切换 class，再靠 class 触发动画，并确保加 will-change: transform 提前升层。
- 给元素加
touch-action: manipulation，减少 iOS 300ms 点击延迟对动画启动的影响 - JS 中用
element.classList.add('is-stretched')，CSS 里写.is-stretched { animation: stretch-bounce 0.5s cubic-bezier(...) forwards; } - 动画结束后记得用
animationend事件清理 class，否则多次点击可能堆积动画状态
scale(1.35) 拉得太狠，scale(0.97) 弹回去又太保守，差 0.02 就可能从“Q 弹”变成“疲软”。得在真机上反复点十几次，盯着末帧停顿那一下的感觉调。 
