用cubic-bezier(0.68,-0.55,0.27,1.55)可实现可控弹性动画，其负y1值制造初始下拉，超1的y2值产生回弹，配合单次scale关键帧与0.4s–0.8s时长达成自然效果。
用 cubic-bezier() 实现弹性效果的关键参数
纯 CSS 实现弹性（bounce）动画，核心不是靠多层关键帧，而是用自定义的 cubic-bezier() 缓动函数模拟物理回弹。浏览器原生的 ease-in-out 或 spring()（实验性）都不够精准；真正可控、复用性强的方式是手写贝塞尔值。
典型弹性曲线需满足：初始加速快 → 超调（overshoot）→ 多次衰减回弹 → 最终静止。推荐起手参数：cubic-bezier(0.68, -0.55, 0.27, 1.55) —— 这组值在多数尺寸和时长下能稳定出弹性感，负的 y1 和大于 1 的 y2 是实现“拉伸后反弹”的必要条件。
- 第一对控制点
(x1, y1)中y1 让动画起始阶段“向下猛拉”（视觉上像压弹簧） - 第二对
(x2, y2)中y2 > 1使动画末段冲过目标位置再折返，形成回弹 - 避免
x1 > x2（如cubic-bezier(0.8, 0, 0.2, 1)），这会导致时间轴倒流，动画卡顿或跳变
@keyframes 配合 cubic-bezier() 的最小可行写法
不要试图在 @keyframes 里用多个 transform: scale() 关键帧模拟弹性——那会显得生硬且难调。正确做法是：只设起始和结束状态，把“弹性感”全交给 animation-timing-function。
button {
animation: pulse 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.15); }
}
注意：animation-duration 建议控制在 0.4s–0.8s。太短（如 0.2s）会让回弹来不及展开；太长（如 1.2s）则失去“弹性”的瞬时反馈感。若需多次弹跳，应叠加多个独立动画，而非延长单次 duration。
立即学习“前端免费学习笔记（深入）”；
为什么 spring() 不建议在生产环境直接用
spring(mass, stiffness, damping, initialVelocity) 是 Chrome 125+ 和 Safari 17.4+ 支持的实验性函数，写起来确实直观，比如 spring(1, 200, 20, 0)。但它有三个硬伤：
- Firefox 全系不支持，且无明确落地时间表
- 参数含义与物理公式强耦合，
mass=1并不等于“轻”，实际表现受元素尺寸、父容器渲染上下文影响极大 - 当动画被 JavaScript 中断（如用户快速连续点击）、或触发
will-change切换时，容易出现回弹中断、残留位移等不可预测行为
除非项目明确限定 Chromium 内核 + 可接受降级为 ease-out，否则优先选 cubic-bezier()。
调试弹性曲线的实用技巧
别靠猜。打开 Chrome DevTools → Elements → Styles → 找到 animation-timing-function → 点击右侧贝塞尔图标，拖动控制点实时预览。重点关注两个现象：
- 曲线是否穿过 (0,0) 和 (1,1)？没穿过说明动画不会从 0% 开始、也不会停在 100%，会偏移
- 曲线是否在 y=1 上方有明显凸起？这是回弹的视觉来源；如果只有轻微上翘，弹性会弱得几乎察觉不到
- 导出调试好的值后，用
calc()封装可维护变量：--elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55); animation-timing-function: var(--elastic);
真正难的不是写出第一个弹性动画，而是让同一套曲线在按钮、卡片、加载指示器上都保持协调的“重量感”。这意味着你得为不同组件微调 y1/y2 —— 比如小图标适合更激进的 y1: -0.7，而模态框入场可能需要压低 y2: 1.3 避免晃动感过强。
