微弹性是动画快到终点时轻微超调再小幅回弹收敛的收尾效果，300–400ms内完成，适用于按钮点击、面板收起等场景；需手写cubic-bezier实现，优先用于transform和opacity，配合will-change及一致的transform类型确保流畅。
直接用 cubic-bezier() 写弹性缓动函数，比套用预设值（如 ease-in-out）更可控，也比 JS 实现轻量——前提是只做视觉反馈类过渡，比如按钮悬停、卡片展开、菜单滑入。
什么是「微弹性」？不是 bounce，而是有回弹余韵的收尾
很多人误以为“弹性”就是弹跳多次，实际前端中真正可用的「微弹性」是指：动画快到终点时轻微超调（overshoot），再小幅回弹收敛，整个过程在 300–400ms 内完成，不突兀、不拖沓。典型场景是按钮点击反馈、折叠面板收起、模态框淡入后微调位置。
- 浏览器原生不提供
ease-elastic这类关键字，必须手写cubic-bezier(a,b,c,d) -
b和c值决定曲线形状：要微弹性，b > 1（向上超调），c （向下回拉），常见组合如 <code>cubic-bezier(0.175, 0.885, 0.32, 1.275) - 避免
b或c绝对值过大（比如 > 1.5），否则会像橡皮筋猛拽，观感廉价
transition 中如何安全注入弹性曲线
弹性曲线本质是 transition-timing-function 的取值，可单独设，也可在 transition 连写中指定。关键点在于：它只影响「已声明会变化的属性」，且不能对所有属性一视同仁。
- 优先作用于
transform（位移/缩放）和opacity，这两类属性触发 GPU 加速，动画流畅；慎用于width、height、background-color等触发布局重排或重绘的属性 - 连写时顺序不能错：
transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease-out; - 如果用
all，弹性曲线会强行应用到所有变化属性上，可能让文字颜色渐变更慢、边框粗细过渡发虚——这不是你想要的「微弹性」
常见翻车现场：为什么写了 cubic-bezier 还没弹性感？
不是曲线错了，往往是上下文没配好。最常被忽略的三个点：
- 没加
will-change: transform—— 尤其在低性能设备上，缺少提示会导致首帧卡顿，把弹性感直接吃掉 - 过渡起点和终点的
transform值类型不一致，比如从translateY(0)到translateX(20px)，浏览器无法插值，直接跳变 - 父容器设置了
overflow: hidden，而弹性过程中的超调位移导致子元素被裁切，看起来像“戛然而止”
微弹性的核心不在参数多精妙，而在克制：只对必要属性启用、控制超调幅度在 5%–12% 视口范围内、确保硬件加速通道畅通。一旦这些底座稳了，cubic-bezier(0.175, 0.885, 0.32, 1.275) 这类值才能真正被眼睛感知为「有呼吸感的收尾」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
