动画失效主因是transition未写在常态样式中，且缺transform-origin和overflow:hidden；正确写法为.btn{transform:scale(1);transition:transform .2s ease;transform-origin:center;overflow:hidden}。
没动画？八成是 transition 写错了位置，或者漏了 transform-origin 和 overflow: hidden ——这三项缺一，放大就卡在半路。
transition 必须写在常态样式里，不是 :hover 里
只在 .btn:hover 里写 transform: scale(1.2)，浏览器根本不会动。它需要提前知道“哪些属性要过渡、多久、怎么缓”，这个声明必须落在默认状态中。
- ✅ 正确写法：
.btn { transform: scale(1); transition: transform 0.2s ease; } - ❌ 错误写法：
.btn:hover { transform: scale(1.2); transition: transform 0.2s ease; }（动画不触发） - 避免用
transition: all 0.2s;：它会把color、border等也拖慢，影响点击反馈速度
transform-origin 不设 center 就会偏移
默认缩放原点是左上角，scale(1.2) 会让按钮往右下“拉扯”，旁边元素被顶开——这不是 bug，是设计如此，只是不符合直觉。
- 必须加：
.btn { transform-origin: center; }（或50% 50%） - 如果按钮是
inline或inline-block，缩放后可能撑高行盒；建议统一设为display: block;或display: inline-flex; - 父容器若没设明确宽高，
center可能不准；优先给按钮本身定尺寸，或用flex布局约束
移动端 hover 基本不可靠，别指望它稳定生效
iOS Safari 和多数安卓浏览器里，:hover 只在首次点击后短暂触发一次，再点就跳转了。纯 CSS 悬停放大在手机上大概率没反馈。
- 真机测试时，手指划过按钮毫无反应，不是代码错，是平台限制
- 替代方案：
.btn:active { transform: scale(0.95); }（按下去缩小），配合transition做点击反馈，更符合触屏习惯 - 不要依赖
@media (hover: hover)切换逻辑——iOS Safari 对它的支持不稳定，且无法解决“点一下就走”的本质问题
放大后模糊或布局异常，多半是渲染和溢出没控住
scale() 是 GPU 加速变换，但亚像素渲染会导致文字/边框模糊；放大后超出容器边界则会撑开布局、出现滚动条，尤其在 Bootstrap 的 .row 里特别明显。
- 加
will-change: transform;到常态样式，提前启用硬件加速（但别滥用，每个按钮都加会吃内存） - 父容器必须加
overflow: hidden;，否则旋转+缩放组合动效时边缘“破框” - 放大 1.2 倍，宽高各多出 10%，确保按钮周围有足够余量，别紧贴兄弟元素
真正难的不是写出那两行 CSS，而是缩放后要不要同步调整 box-shadow 的模糊半径和偏移、要不要在快速划过时加 transition-delay 过滤误触——这些细节没人提，但上线后第一个被 QA 打回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
