要实现平滑放大，必须配合transition声明变化过程；推荐写法为transition: transform .3s ease-in-out，放大倍数不超过1.3，父容器设overflow: hidden，并谨慎使用will-change: transform。
用 transform: scale() 配合 transition 实现平滑放大
直接写 transform: scale(1.2) 不会动，必须加 transition 声明变化过程。浏览器默认不给变换加动画，这是最常漏掉的一环。
关键点是：只对 transform 和 opacity 做 transition，性能最稳；别写 transition: all .3s，会意外触发重排，卡顿明显。
-
transition: transform .3s ease-in-out是推荐写法，.3s是时长，ease-in-out比linear更自然 - 放大倍数别超过
1.3，否则边缘裁切或失真容易露馅（尤其object-fit: cover的图） - 父容器记得设
overflow: hidden，不然放大会撑出边界
为什么图片会模糊？和 will-change 有关
Chrome/Firefox 在缩放非整数倍时，可能调用低质量插值算法，导致悬停瞬间糊一下。这不是 bug，是浏览器默认的性能取舍。
加 will-change: transform 能提前告诉浏览器“这个元素要动”，让它启用更高质量的渲染管线——但别滥用，每个加了它的元素都会额外占内存。
立即学习“前端免费学习笔记（深入）”；
- 只在 hover 触发前一刻加，比如：
img:hover { will-change: transform; } - 不要写在初始状态里，否则长期占用资源
- 如果只是小图（
200px × 200px以内），其实可以跳过这步，人眼几乎看不出差别
:hover 失效？检查是否被其他样式覆盖或缺少交互能力
图片没反应，八成不是动画问题，而是 :hover 根本没生效。常见原因：父级有 pointer-events: none、图片被 z-index 盖住、或者它压根不是可交互元素（比如在 div 里但没设 display: block）。
- 用浏览器开发者工具检查元素上是否有
:hover伪类被划掉（表示被更高优先级样式覆盖） - 确保图片不是嵌在禁用指针事件的容器里，比如某些 UI 框架的
disabled状态组件 - 移动端 Safari 默认不触发
:hover，真要兼容得加@media (hover: hover)媒体查询包裹
想限制只在特定尺寸下生效？用媒体查询控制 transition
小屏手机上放大反而影响点击精度，没必要。与其让动画在所有设备跑，不如用媒体查询关掉它。
-
@media (max-width: 768px) { img { transition: none; } }最干脆 - 如果还想保留一点反馈，可以换成
opacity变化：transition: opacity .2s，更轻量 - 别用
min-resolution或prefers-reduced-motion做兜底，除非项目明确要求无障碍适配
真正难的是边缘场景：比如图片宽高不固定、用了 srcset、或者放在 CSS Grid 的自适应轨道里。这些时候 scale 放大可能拉伸变形，得配合 transform-origin 微调锚点，但那是另一回事了。
