transform: scale() 是唯一靠谱的选择，因其由GPU加速、不触发重排、不改变文档流且兼容性好；需显式设初始状态、合理配置 transform-origin 和 transition 属性，并排查 overflow、层叠上下文及行内元素显示问题。
直接用 transform: scale() 配合 transition，别碰 zoom 或改 width/height——前者不标准、后者触发重排，动画卡顿且不可控。
为什么 transform: scale() 是唯一靠谱的选择
浏览器对 transform 的动画是合成层加速的，GPU 直接处理，60fps 稳定；而改 width、height 或 font-size 会强制触发 layout + paint，尤其在复杂 DOM 下掉帧明显。更关键的是：scale() 缩放不改变文档流，父容器无需重新计算布局，子元素定位、边距、阴影都自然跟随缩放。
常见错误现象：zoom: 1.5 在 Chrome DevTools 里看着正常，但 Safari 上失效、Firefox 中文字模糊、CI 构建时报 CSS 校验警告；用 width: 200px → width: 300px 动画，鼠标移入瞬间“抖一下”，因为浏览器先重排再重绘。
- 必须显式写
transform: scale(1)作为初始状态，否则首次 hover 会从隐式none跳变，Safari 和旧版 Edge 尤其明显 -
transform-origin默认是50% 50%（中心），若想左上角放大，得加transform-origin: top left - 如果放大后内容被裁剪，大概率是父容器有
overflow: hidden或transform创建了新的层叠上下文
transition 写法必须具体，不能偷懒用 all
transition: all 0.3s ease 看似省事，实际埋雷：只要 JS 或其他 CSS 规则无意中改了 color、opacity、background-position，就会一起动，导致动画“乱入”。真实项目里最常踩的坑就是按钮放大时顺带闪了一下边框色或背景渐变。
立即学习“前端免费学习笔记（深入）”；
- 只过渡需要的属性：
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s ease - 缓动函数别硬套
ease，cubic-bezier(0.25, 0.46, 0.45, 0.94)更接近物理惯性，放大过程更自然 - 移动端无 hover，
:hover在 iOS Safari 上可能完全不触发，或只在点击后生效一次；真要兼容，得用touchstart/touchend切换 class，或媒体查询@media (hover: hover)做隔离
放大后元素错位或边缘被截？先查这三处
缩放动画跑起来之后，发现元素偏移、阴影消失、图标错位，90% 不是 scale() 写错了，而是父级或祖先节点在“暗中干预”。
-
overflow: hidden：父容器设了这个，放大后超出部分直接砍掉，调试时临时加overflow: visible !important确认 -
transform层叠上下文：父级用了transform: translateZ(0)或scale(1)，会创建独立渲染区域，子元素z-index失效、box-shadow被裁剪 - 行内元素没撑开：比如
<span>或<i>直接加transform，在旧版 Safari 里可能不响应，得加display: inline-block或display: inline-flex
真正难调的从来不是 scale 值本身，而是它和周围样式、设备特性、渲染管线之间的隐式耦合。一个看似简单的放大动效，背后要同时平衡性能、兼容性、可维护性——尤其是当它嵌在第三方 UI 库或 CMS 输出的 HTML 里时，transform-origin 和 overflow 往往比动画时长更值得花时间盯。
