为实现图片平滑缩放，需给 transform 添加 transition 属性，如 transition: transform 0.3s ease；配合明确宽高、overflow: hidden、will-change 和 opacity 可进一步优化效果。
图片用 transform: scale() 放大缩小，如果没加过渡效果，会瞬间跳变，显得生硬。关键就是给 transform 加上 transition，让缩放过程平滑自然。
给 transform 添加 transition
直接在图片或其容器的 CSS 中声明过渡属性，指定对 transform 做动画，时长和缓动函数按需调整：
-
基础写法：
transition: transform 0.3s ease; -
更稳妥写法（兼容旧版）：
transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -
只在过渡触发的状态里设置 scale：比如 hover、focus 或 JS 切换的 class，不要在默认状态写
scale(1)，否则可能干扰初始渲染
避免 layout 波动导致抖动
单纯用 scale 不影响文档流，但如果父容器尺寸不固定，或图片本身没设宽高，放大时可能触发重排，造成视觉“晃动”：
- 给图片设明确的
width和height（或用aspect-ratio），防止缩放时周围内容挤动 - 父容器建议加
overflow: hidden，避免放大后边缘溢出影响布局 - 用
will-change: transform提前告知浏览器该元素将做变换（适合频繁交互场景，但别滥用）
配合 opacity 实现更柔和的入场
纯 scale 可能还是略显机械，叠加透明度变化会让过渡更有层次感：
立即学习“前端免费学习笔记（深入）”；
- 默认状态：
opacity: 1; transform: scale(1); - 悬停/激活状态：
opacity: 0.95; transform: scale(1.08); - 过渡统一写：
transition: transform 0.25s ease, opacity 0.25s ease;
JS 控制时注意 class 切换时机
如果用 JavaScript 动态添加缩放 class（比如点击切换），要确保 class 是在样式计算完成后再应用，避免跳帧：
- 不要立刻加 class 后马上改
transform，优先靠 CSS class 控制状态 - 需要 JS 触发时，用
element.classList.toggle('zoomed')就够了，所有样式交给 CSS 处理 - 若需精确控制，可用
requestAnimationFrame包裹 class 操作，保证在下一帧生效
不复杂但容易忽略：transition 必须作用在“被变换的元素”本身，且只能对可动画的属性生效；scale 是 transform 的子属性，所以必须写 transition: transform ...，写成 transition: scale ... 是无效的。
