transition必须写在图片默认状态而非:hover中，否则移出无动画；需配合transform-origin控制缩放原点，并注意移动端:active或JS替代hover及性能优化。
transition 要写在图片的默认状态上，不是 hover 里
很多人把 transition 放在 :hover 伪类里，结果鼠标移入有动画，移出却“啪”一下跳回原样。这是因为 transition 必须定义在元素的**初始状态**（即非 hover 的规则块中），才能控制两个方向的变化。
正确写法是：
img {
transform: scale(1);
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.2);
}-
transition只写一次，在默认样式里；hover 里只改transform值 - 别用
all 0.3s，它会把所有属性都加过渡，影响性能且可能触发意外动画 - 如果图片是响应式布局里的，注意父容器是否设置了
overflow: hidden，否则缩放后边缘可能溢出
scale() 缩放中心点默认是元素中心，要改就用 transform-origin
默认情况下，scale(1.2) 是以图片中心为原点放大，看起来是“均匀撑开”。但有时你想要从左上角拉伸、或从底部往上浮起，就得调 transform-origin。
常见用法示例：
立即学习“前端免费学习笔记（深入）”；
img {
transform: scale(1);
transform-origin: top left; /* 从左上角开始缩放 */
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}- 可选值包括
top、bottom、left、right、center，也支持像素或百分比，如transform-origin: 20px 30px - 如果用了
transform-origin，务必把它和transform写在同一个选择器里，否则可能被覆盖或失效 - 某些旧版 Safari 对
transform-origin在 inline 元素（比如display: block或display: inline-block
移动端 touch 设备上 hover 不可靠，得补 :active 或 JS 监听
在 iOS 和 Android 上，:hover 只在模拟器或部分桌面浏览器里稳定生效；真机点击时，往往只闪一下，甚至完全不触发。这不是 bug，是规范行为——触摸屏没有“悬停”这个状态。
- 简单方案：加
img:active { transform: scale(1.2); }，适用于单次点击反馈 - 更可靠方案：用 JS 监听
touchstart/touchend，动态增删 class，例如：img.classList.add('is-zoomed') - 别忘了同时写
@media (hover: hover)媒体查询做区分，避免桌面端误触发 touch 逻辑
scale() 动画卡顿？优先检查是否触发了 layout 或 paint
虽然 transform: scale() 本身是合成层动画（GPU 加速），但如果父元素有 will-change: transform 缺失、或图片本身带 filter、opacity 等属性，仍可能降级到主线程渲染，导致掉帧。
- 确保图片没被其他 CSS 规则强制重绘，比如
box-shadow、border-radius过大、或背景图用了background-size: cover配合缩放 - 对关键图片加
will-change: transform可提前提示浏览器升层，但别滥用——每个都加反而增加内存开销 - 如果页面里有很多同类缩放图片，考虑用
contain: layout style paint隔离它们的渲染范围，减少重排影响
缩放效果看着简单，但真正上线时，hover 兼容性、移动端响应、以及动画是否掉帧，这三个地方最容易漏掉调试。
