transition-transform 必须配合 transform: scale() 才生效，因为 css 中无 scale 可过渡属性，仅 transform 属性本身支持平滑插值；错误写法 img { scale: 1; transition: scale 0.3s; } 被忽略，正确应为 img { transform: scale(1); transition: transform 0.3s; }。
transition-transform 为什么必须配合 transform: scale() 才生效
直接写 transition: scale 0.3s 是无效的，CSS 中没有 scale 这个可过渡的属性名。真正能被 transition 捕捉并平滑插值的，只有 transform 这个属性本身。而 scale() 是 transform 函数的一种取值，必须通过 transform: scale(1) → transform: scale(1.2) 的变化才能触发过渡。
- 错误写法：
img { scale: 1; transition: scale 0.3s; }—— 浏览器完全忽略 - 正确写法：
img { transform: scale(1); transition: transform 0.3s; } - hover 时改
transform: scale(1.2)，浏览器才计算中间帧
scale 值小于 1 时图片模糊？这是 transform-origin 和像素对齐问题
当用 scale(0.8) 缩小图片，尤其在 chrome/firefox 中容易出现边缘发虚、文字状锯齿，根本原因不是过渡本身，而是缩放中心点（transform-origin）默认为 50% 50%，导致图片渲染时采样位置落在非整像素坐标上。
- 加
transform-origin: top left;可缓解（尤其适合左上角对齐的图） - 更稳妥的是强制开启硬件加速 + 像素对齐：
transform: scale(0.8) translateZ(0); - 若图片是图标类小图，建议用
image-rendering: -webkit-optimize-contrast;或image-rendering: crisp-edges;强制邻近采样
transition-timing-function 怎么选才不“假”
用 ease（默认）做缩放，起始快、中间慢、结尾又快，容易显得“弹跳感过强”；而 linear 又太机械。实际中推荐：
-
cubic-bezier(0.25, 0.46, 0.45, 0.94)—— 类似 ios 的“标准缓动”，缩放自然不突兀 - 或简写为
ease-out：适合 hover 放大（起始有力，收尾柔和） - 避免用
ease-in：放大开始太慢，用户会误以为没响应 - 如果要“悬停即响应”，把
transition-delay设为0s，别依赖默认值
移动端 touch 设备下 hover 不触发？得补 :active 或 js 监听
纯 CSS 的 :hover 在 iOS safari 和部分 android 浏览器里，只在第一次点击后才生效，且可能残留伪类状态。这不是 transition 的问题，而是交互模型差异。
立即学习“前端免费学习笔记（深入）”；
- 简单方案：同时写
img:hover, img:active { transform: scale(1.1); } - 更可靠：用 JS 监听
touchstart和touchend切换 class，比如.is-zoomed - 注意：
transform: scale()在低版本 Android（≤4.3）需加-webkit-transform前缀 - 别忘了设置
img { will-change: transform; }防止低端机卡顿（但别滥用，仅对频繁缩放的图加）
过渡效果是否“顺”，关键不在 scale 数值多精确，而在 transform 是否触发了合成层、origin 是否匹配布局锚点、timing function 是否匹配人眼预期节奏——这些细节漏掉一个，用户就会觉得“卡”或“糊”。