cubic-bezier(0.68, -0.55, 0.27, 1.55)能实现弹性反弹，因其三段节奏对应物理回弹：前段陡斜率快速下压，y1=-0.55触发负向过冲，y2=1.55造成末端拖拽式缓慢归位；x1/x2在[0,1]内确保曲线生效，误写x越界则降级为ease导致失弹。
为什么cubic-bezier(0.68, -0.55, 0.27, 1.55)能做出弹性反弹
这个值不是玄学凑出来的，它直接对应物理回弹的三段节奏：快速下压（前半段斜率陡）、过冲反弹（y1 = -0.55 拉出负向速度）、缓慢归位（y2 = 1.55 让末端减速变拖拽）。浏览器允许 y1/y2 超出 [0, 1]，但 x1/x2 必须在 [0, 1] 内——这里 x1=0.68、x2=0.27 是合法的，所以曲线生效；若误写成 cubic-bezier(-0.1, -0.55, 0.27, 1.55)，x1 越界，整条曲线会被静默降级为 ease，动画就“没弹性”了。
常见错误现象：transform: scale(1.1) 动画看起来只是快慢变化，没有“压下去再弹上来”的错觉——大概率是贝塞尔参数被浏览器忽略了。
- 用 Chrome DevTools 的「Animations」面板点开 timing function 预览图，如果显示为直线而非曲线，说明
cubic-bezier()没生效 - 别手调四个数，先用 cubic-bezier.com 拖出大致形状，再微调 y1/y2 控制反弹幅度
- y1 1 表示“末端拖尾”，适合卡片悬浮或入场弹跳
transition 和 @keyframes 里怎么配 cubic-bezier 才不翻车
transition 只能全局控制一次属性变化的节奏，比如 transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55)，适用于 hover、focus 或 JS 切换 class 的简单反馈。而真实弹跳（比如落地后弹两次）必须拆进 @keyframes，因为单段贝塞尔无法表达多次速度反转。
关键区别在于写法位置：
-
transition中直接写在属性值末尾：transition: transform 0.4s cubic-bezier(...)✅ -
@keyframes中不能写在from/to块里：to { transform: scale(1); animation-timing-function: cubic-bezier(...); }❌（无效） - 正确写法是把
cubic-bezier()放在应用动画的元素上：.btn { animation: press 0.4s cubic-bezier(...) forwards; }✅
多段弹跳推荐用四段关键帧配不同贝塞尔，例如主弹 + 两次衰减 + 归位，每段用独立 cubic-bezier() 控制节奏，而不是硬塞进一个函数里。
哪些属性加了 cubic-bezier 会卡顿甚至失效
只有走合成层的属性才能稳定跑出 60fps 弹性动画。用 top、margin-top、left 等触发布局计算的属性，加再好的贝塞尔也卡——因为浏览器要反复重排。
- 安全属性只有三个：
transform（含translateX/Y/Z、scale、rotate）、opacity、filter - 想让卡片“弹起来”，必须用
transform: translateY(-10px)，不是margin-bottom: 10px - 移动端慎用
filter: blur()配合弹性动画，iOS Safari 容易糊成一片，建议用backdrop-filter替代且限制模糊半径 ≤ 10px - 别对
width、height、font-size这类属性加cubic-bezier过渡——视觉上根本看不出“弹性”，只会拖慢渲染
移动端点击回弹为什么按着不弹、松手才动
原生 :active 伪类只在触摸/鼠标按下期间存在，松手瞬间就没了，根本来不及执行一个 0.4s 的带回弹的 transform 动画。这不是 bug，是规范行为。
实操解法只有两个：
- 用 JS 控制临时类：
button.addEventListener('click', () => { btn.classList.add('is-pressed'); setTimeout(() => btn.classList.remove('is-pressed'), 450); })，延时要比transition-duration多 30–50ms 才稳 - 用
:focus:not(:active)捕获“刚松开”的瞬间，前提是 button 有tabindex="0"，且用户习惯用键盘操作（适合无障碍场景）
真正容易被忽略的是：iOS 上 :focus 默认不触发，得加 ontouchstart="" 或 cursor: pointer 才能激活伪类响应。不处理这点，整个回弹在 iPhone 上就是静音的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
