CSS如何给元素添加橡皮筋被拉长反弹的动画

纯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 允许动画短暂“过冲”，这是反弹感的来源。

立即学习“前端免费学习笔记（深入）”；

HIX Translate

由 ChatGPT 提供支持的智能AI翻译器

下载

• 不要复制网上泛用的「弹性缓动」参数，很多是为下拉刷新设计的，拉伸场景要更陡峭的起始斜率
• 如果元素有边框或阴影，记得加 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，否则多次点击可能堆积动画状态