transition缩放动画没反应，因未设transform初始值或漏写transform-origin；q弹需cubic-bezier(0.2,0.8,0.4,1.4)配合多段缩放与gpu加速。
transition 缩放动画为什么点击没反应？
常见原因是没给按钮设置 transform 的初始值，或漏写了 transform-origin 导致缩放中心偏移。CSS 的 transition 只对「可插值属性」生效，transform 支持，但必须从一个明确的起始状态开始——比如不能从 unset 或空值跳到 scale(0.95)。
- 确保按钮默认有
transform: scale(1); - 加
transform-origin: center;避免文字被拉扯或缩放错位 -
transition必须写在默认状态（非:active）里，否则只在鼠标松开时触发一次回弹
如何用 cubic-bezier() 定制Q弹感？
“Q弹”不是简单来回抖动，而是先快压、再慢回、带一点过冲（overshoot）再回稳。标准 ease-out 太生硬，ease-in-out 又太平均。真正可用的贝塞尔值是 cubic-bezier(0.2, 0.8, 0.4, 1.4) —— 第三参数 >1 实现过冲，第四参数 >1 延长回弹尾部。
- 不要用在线生成器随便选“弹性”预设，很多返回的是
spring()（仅 Safari 支持），不兼容 Chrome/Firefox - 该曲线在缩放从
1 → 0.95 → 1.05 → 1的多段动画中才显 Q 弹，单次scale(0.95)配它反而怪异 - 移动端需额外加
touch-action: manipulation;防止点击延迟导致动画卡顿
:active 里只写 scale(0.95) 为什么不够？
单纯靠 :active { transform: scale(0.95); } 只能实现“按下去”，没有“弹回来”的视觉节奏。Q 弹的核心在于两段变化：按下压缩 + 松开反弹，而 :active 状态本身不会自动恢复，它依赖用户释放鼠标/手指来退出——这期间的过渡必须由 transition 承接。
- 正确结构：默认态定义
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.4, 1.4);，:active仅改transform值 - 避免在
:active里再写transition，会造成叠加冲突 - 若想增强反馈，可同步改
background-color，但它的transition应单独设更短时间（如0.1s），否则颜色拖慢整体节奏
移动端真机上动画卡顿或闪一下？
根本原因是浏览器未将该元素提升为独立图层，导致 transform 动画被迫走 CPU 软渲染。尤其在低端安卓机上，scale 动画若没触发硬件加速，帧率会掉到 10fps 以下。
- 强制开启 GPU 加速：在按钮上加
transform: translateZ(0);或will-change: transform; - 但
will-change别滥用，只对高频交互元素用，否则内存占用飙升 - 检查是否父容器有
overflow: hidden且裁剪了按钮边缘——这会阻止图层提升，动画可能被截断或闪烁
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
