用 transform: scale() 配合 transition 是最轻量、兼容性最好、且不触发重排的方案；因 width/height 动画会引发布局抖动和模糊，而 scale 仅走 gpu 合成层，顺滑省资源，chrome/firefox/safari 及 ie10+ 均支持。
直接给结论：用 transform: scale() 配合 transition 是最轻量、兼容性最好、且不触发重排的方案；别用 width/height 动画，会引发布局抖动和模糊。
为什么用 transform: scale() 而不是改宽高？
改 width 和 height 会触发浏览器重排（reflow），导致卡片内其他元素位置偏移，还可能让图片边缘发虚；transform 只走合成层（compositor），纯 GPU 加速，顺滑又省资源。Chrome/Firefox/Safari 均支持 transform 的 hover 动画，IE10+ 也 OK。
常见错误现象：
• 卡片放大时旁边文字跳位
• 图片放大后边缘锯齿或模糊
• 移入移出有卡顿感
- 确保图片父容器设
overflow: hidden，避免放大后溢出 - 给图片加
display: block，消除底部默认空白间隙 - scale 建议控制在
1.05–1.2之间，过大易显得突兀
transition 的关键参数怎么配？
只过渡 transform，不连带 opacity 或 filter 一起动，能避免隐式合成层切换带来的闪烁。延迟和缓动函数直接影响体验质感。
推荐写法：transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-
cubic-bezier(0.25, 0.46, 0.45, 0.94)比ease更轻快，适合悬停反馈 - 时间选
0.25s–0.35s：太短没感知，太长像卡顿 - 不要写
transition: all 0.3s—— 会意外过渡其他属性（比如border-color）
如何防止放大后图片被裁切或错位？
核心是控制“放大中心点”。默认 transform-origin 是 50% 50%（居中），但若卡片有阴影、边框或内边距，视觉上容易觉得“飘”。
- 保持居中缩放：显式写
transform-origin: center; - 若想让图片“从鼠标位置局部放大”，需 JS 配合计算坐标，CSS 本身做不到
- 务必给卡片容器设固定宽高（如
width: 300px; height: 200px;），否则overflow: hidden失效 - 图片用
object-fit: cover保证比例不失真，别依赖background-image—— 那样无法语义化和 SEO
真正容易被忽略的点：hover 效果在触摸设备（iOS Safari、Android Chrome）上默认不触发，除非你加了 :active 伪类或监听 touchstart；如果目标用户含大量移动端，得单独考虑点击态 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
