直接用 :hover 配合 transform: scale() 就够了，无需 @keyframes；只需设置 transform: scale(1)、transition、transform-origin 和 will-change 等优化属性即可实现流畅可控的悬停放大效果。
直接用 :hover 配合 transform: scale() 就够了，不用写 @keyframes
绝大多数场景下，图片悬停放大根本不需要定义 @keyframes。CSS 的 :hover 伪类 + transform: scale() + transition 组合更简洁、性能更好、也更容易控制。
写 @keyframes 反而容易让动画不可控（比如无法响应鼠标移出、不能自然中断、缩放中心难对齐）。
-
transform: scale(1.2)表示放大到原尺寸的 1.2 倍 -
transition: transform 0.3s ease控制平滑过渡，ease是默认缓动，也可换成ease-in-out - 必须给原始状态显式写
transform: scale(1)，否则首次 hover 可能跳变
transform-origin 决定缩放中心点，不设默认是居中
如果图片放大后“偏移”或“贴边跑”，大概率是缩放原点没对齐。默认 transform-origin: center center 是安全的，但你可以按需调整：
- 想以左上角为基点放大：
transform-origin: top left - 想固定底部居中（比如卡片图）：
transform-origin: bottom center - 缩放时保持图片在容器内不溢出，建议同时加
overflow: hidden到父容器
别漏掉 will-change 或 backface-visibility，否则低端设备可能卡顿
纯 scale() 动画在部分旧版 Chrome / Safari 上可能触发重排或渲染抖动。加一行优化能显著提升流畅度：
立即学习“前端免费学习笔记（深入）”；
-
will-change: transform提前告知浏览器该元素将变化（仅对频繁交互元素启用，别滥用） -
backface-visibility: hidden强制启用硬件加速，兼容性更好 - 两者可同时加，无冲突：
will-change: transform; backface-visibility: hidden;
img {
display: block;
width: 200px;
height: auto;
transform: scale(1);
transition: transform 0.3s ease;
transform-origin: center center;
will-change: transform;
backface-visibility: hidden;
}
img:hover {
transform: scale(1.2);
}
如果非要用 @keyframes，得配合 animation 和 JS 控制时机
只有极少数情况需要 @keyframes：比如想复用同一段动画、做循环缩放、或和其它属性（opacity、filter）组合复杂序列。这时必须注意：
-
animation默认不响应鼠标移出，得用 JS 监听mouseenter/mouseleave手动增删 class 触发动画 - 不能直接在
:hover里写animation: zoom-in 0.3s forwards，因为移出时不会自动反向播放 - 若真要反向，得额外定义
zoom-out动画，并在移出时切换 class —— 复杂度陡增
