图片悬停放大后“跳一下”的根本原因是图片默认为行内元素，受基线对齐影响产生底部空白，放大时空白被拉伸导致视觉上移；需加display: block或vertical-align: top消除间隙，并配合transform-origin: center、overflow: hidden及will-change: transform等优化措施。
直接用 :hover 配合 transform: scale() 和 transition 就能实现平滑放大，不需要 @keyframes，也不需要 JS 控制——前提是把几个关键点对齐。
为什么图片悬停放大后会“跳一下”
根本原因不是动画本身，而是图片默认是行内元素，底部自带空白间隙（baseline 对齐导致）。放大时这个间隙被拉伸，视觉上就像突然上移。
- 给
img加display: block或vertical-align: top - 如果父容器用了
inline-block，改用display: block；或者设font-size: 0消除行内间隙 - 别依赖
object-fit: cover后再放大——它可能让实际渲染区域和缩放锚点错位
scale() 动画卡顿或闪屏怎么办
Safari 和部分旧版 Chrome 在纯 scale(1) → scale(1.2) 过程中容易抽帧，尤其首次触发时。这不是 bug，是浏览器没提前启用 GPU 加速。
- 必须在默认状态加
will-change: transform（只加在要动的元素上，别滥用） - 更稳妥的做法是补一句
backface-visibility: hidden，兼容性比will-change更好 - 避免写成
transform: scale(1.2)单独一条，改成transform: scale(1.2) translateZ(0)强制硬件加速 -
translateZ(0)不要加在:hover里，而是在默认状态就存在，否则 Safari 可能闪一下
放大中心点偏移、图片“跑出画面”
transform-origin 默认确实是 50% 50%，但会被父容器的 padding、border、flex 对齐方式或 object-fit 覆盖掉。
- 显式写死
transform-origin: center center或transform-origin: 50% 50% - 如果图片在
flex容器里，检查align-items是否为stretch（会撑高容器，影响缩放锚点） - 用开发者工具看 computed styles，确认
transform-origin的真实值是不是被继承或重写了 - 放大后溢出？父容器加
overflow: hidden最直接
移动端 hover 不生效还误触
iOS 和部分安卓浏览器根本没有 hover，所谓“悬停”其实是模拟一次点击，导致动画一闪而过，甚至干扰后续点击逻辑。
- 用媒体查询隔离：
@media (hover: hover) and (pointer: fine) { img:hover { transform: scale(1.2); } } - 别用纯
:hover做关键交互（比如图库预览），该用click+ JS 切换 class -
touch-action: manipulation可减少延迟，但不能解决“悬停不持续”的本质问题 - 放大倍数别超过
scale(1.3)，否则小屏上容易触发横向滚动条
真正难的不是写那几行 CSS，而是判断当前布局里哪个父容器悄悄改了 transform-origin，或者哪条全局 font-size 规则让图片底部空隙又回来了——这些细节不会报错，但会让效果看起来“不太对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
