纯css实现物理感回弹效果的关键是使用cubic-bezier(0.17, 0.67, 0.83, 0.67)作为animation-timing-function，并仅对transform属性（如scale、translatey）做动画，避免触发布局重排；错误做法包括使用ease-in-out、动画width/height或未配will-change: transform。
用 transform + spring 缓动实现回弹效果
纯 CSS 实现物理感回弹，关键不是靠 JS 模拟弹簧，而是用 animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67) —— 这组值接近 macOS 系统级 spring 动画的贝塞尔曲线。浏览器原生支持，无需额外库。
常见错误是直接套用 ease-in-out 或 ease-out，它们只有减速/加速，没有“过冲→回弹”过程，看起来生硬。
-
cubic-bezier(0.17, 0.67, 0.83, 0.67)是最稳妥的 spring 曲线，兼容 Chrome 43+/Firefox 16+/Safari 9+ - 动画目标必须是
transform（如scale、translateY），避免触发布局重排 - 不要对
width或height做 spring 动画，会触发 layout，卡顿明显
加载圆点 bouncing 回弹动画实操
典型三圆点 Loading（比如三个 <span></span>）要做错落回弹，重点在 stagger 和独立 timing function。
错误写法：给所有点加相同 animation-delay 却用 linear 缓动，节奏平直无弹性；正确做法是每个点用独立 animation 并配不同延迟和 spring 曲线。
span:nth-child(1) {
animation: bounce 1.2s cubic-bezier(0.17, 0.67, 0.83, 0.67) infinite;
}
span:nth-child(2) {
animation: bounce 1.2s cubic-bezier(0.17, 0.67, 0.83, 0.67) -0.4s infinite;
}
span:nth-child(3) {
animation: bounce 1.2s cubic-bezier(0.17, 0.67, 0.83, 0.67) -0.8s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
- 延迟用负值（
-0.4s）比正向 delay 更易控制循环相位 - 峰值位移（
-12px）不宜过大，否则视觉上像“跳”，不是“弹” - 总时长建议 1.0–1.4s，短了显得急促，长了拖沓
SVG 路径描边 + spring 回弹的 trick
如果用 SVG <circle></circle> 或 <path></path> 做环形加载，想让“描边进度”有回弹感，不能直接 animating stroke-dashoffset —— 它不支持 spring timing function。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
解决方案：用 @keyframes 手动定义“过冲→回弹”的 offset 关键帧，再配合 spring timing。
@keyframes dash-rebound {
0% { stroke-dashoffset: 300; }
50% { stroke-dashoffset: 100; } /* 过冲到 100 */
100% { stroke-dashoffset: 150; } /* 弹回停在 150 */
}
circle {
animation: dash-rebound 1.5s cubic-bezier(0.17, 0.67, 0.83, 0.67) infinite;
}
- 过冲值（
100）要比目标值（150）小，才能形成“压下去再弹上来”的物理感 - 务必提前算好
stroke-dasharray和stroke-dashoffset的基准值，否则回弹错位 - 这个方案在 Safari 上偶有渲染抖动，加
transform: translateZ(0)可强制 GPU 加速
移动端 touch 触发 loading 回弹的边界问题
用户下拉刷新时触发 loading，期望松手瞬间有个“回弹收尾”，但直接复用上面的动画容易卡在中间帧。
根本原因是：CSS 动画无法在运行中“中断并跳转到终点”，必须靠 JS 控制 animation-play-state 或重置 class。
- 监听
touchend后立即移除旧动画 class，加一个rebound-final类，其 animation duration 设为 0.3s，timing function 保持 spring - 避免用
transition替代animation，transition 无法定义多段关键帧，做不出过冲 - 安卓 WebView 里
cubic-bezier支持不稳定，可降级为ease-out，但需单独测试 fallback 效果
回弹感的本质是“非线性位移 + 过冲修正”，而不是堆砌 fancy 效果。最容易被忽略的是 timing function 和 transform 属性的绑定关系 —— 换个属性或漏写 will-change: transform，回弹就变成卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
