transition 无法过渡 zoom 属性，应改用 transform: scale() 实现平滑缩放；需配合 transform-origin 设置缩放锚点，避免漂移；scale 缩放不触发重排、性能更好，但非整数倍可能导致模糊，建议优先使用整数倍或添加 will-change 优化。
transition 无法直接过渡 zoom 属性
浏览器（尤其是 Chrome/Edge）虽支持 zoom，但它不是 CSS 动画属性标准的一部分，transition 对它完全无效。写成这样不会产生平滑缩放效果：
div {
zoom: 1;
transition: zoom 0.3s ease;
}
div:hover {
zoom: 1.5;
}
实际表现是：hover 瞬间跳变，无过渡。这是最常踩的坑——误以为 zoom 可被过渡控制。
用 transform: scale() 替代 zoom 实现可过渡缩放
transform 是真正受 transition 支持的属性，且 scale() 行为与 zoom 接近（视觉上放大缩小），但更可控、更标准。
-
scale(1)≈zoom: 1，scale(1.5)≈zoom: 1.5 - 缩放基于元素自身的中心点（可通过
transform-origin调整） - 不影响文档流，不触发重排（re-layout），性能更好
- 兼容所有现代浏览器（IE9+ 支持
transform，但需注意前缀）
正确写法示例：
div {
transition: transform 0.3s ease;
}
div:hover {
transform: scale(1.5);
}
transform-origin 决定缩放“锚点”位置
默认以元素中心缩放，但有时你需要左上角、底部居中等效果。这时必须显式设置 transform-origin，否则缩放会“漂移”或遮挡相邻元素。
-
transform-origin: top left→ 从左上角向外放大 -
transform-origin: center bottom→ 从底部中点向上撑开 - 值可以是关键词、百分比或像素，如
transform-origin: 20px 30px - 该属性本身**不可被 transition**，所以需在基础状态就写好，避免 hover 时突变
例如固定从左上角缩放：
div {
transform-origin: top left;
transition: transform 0.3s ease;
}
div:hover {
transform: scale(1.4);
}
缩放后内容模糊？检查是否触发了亚像素渲染或设备像素比问题
用 transform: scale() 放大时，部分浏览器（尤其 Chrome）在非整数缩放倍数下可能让文字/边框变糊。这不是 bug，而是抗锯齿策略导致的视觉现象。
- 优先使用整数倍缩放（如
scale(2)）可缓解 - 对文字区域加
will-change: transform有时能改善渲染质量（但慎用，避免过度触发合成层） - 若必须精细缩放（如 1.23 倍），可尝试加
-webkit-font-smoothing: subpixel-antialiased（仅限 WebKit） - 绝对不要用
zoom+transform混用，二者行为冲突，会导致布局错乱
真正需要“精确控制缩放中心 + 平滑动画 + 清晰渲染”的场景，transform 是唯一可靠路径；zoom 只适合静态、非交互、兼容旧 IE 的极简需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
