推荐用 scale(0.95) 或 scale(0.98) 起始而非 scale(0)，避免布局塌陷；动画需等图片加载完成再触发，通过 js 监听 load 后添加 class 或结合 animation-delay/forwards 控制；必须预设宽高、display: block 等防 layout shift；注意 safari 兼容性及 overflow 裁切问题。
用 @keyframes 定义从 0 到 1 的缩放动画
直接在 @keyframes 中定义 transform: scale() 的起止状态，注意起始值不能是 scale(0)（完全不可见会导致布局塌陷或触发浏览器优化跳过动画），推荐用 scale(0.95) 或 scale(0.98) 起始，视觉上仍是“未出现”，但更稳定。
@keyframes fadeInScale {
from {
transform: scale(0.97);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
给图片元素添加 animation 并设置触发时机
关键点在于：动画必须等图片加载完成后再播放，否则可能在 loading 占位阶段就播完了。不要依赖 img 的 onload 手动加 class——CSS 动画本身不感知加载状态。稳妥做法是：默认隐藏 + JS 监听 load 后添加动画 class；或者用 animation-delay 配合 animation-fill-mode: forwards 控制初始态。
-
animation: fadeInScale 0.4s ease-out forwards;——forwards确保动画结束后保持scale(1)和opacity:1 - 避免写
animation: fadeInScale 0.4s;—— 缺少缓动函数会导致生硬弹跳 - 别把
animation写在img的伪类如:hover上——这会延迟到悬停才触发，不符合“加载时”需求
防止 layout shift 和闪动的必要 CSS 重置
图片加载前若无尺寸占位，缩放动画会引发页面跳动。必须提前声明宽高，且禁用默认的 content-box 行为干扰：
- 给
img设置明确的width和height（可配合aspect-ratio保持比例） - 加上
vertical-align: top;或display: block;消除行内元素默认基线对齐导致的底部空白 - 慎用
object-fit配合动画——某些浏览器中scale与object-fit: cover叠加可能产生裁剪异常
兼容性与性能注意事项
transform: scale() 动画本身硬件加速良好，但仍有几个实际坑：
立即学习“前端免费学习笔记（深入）”；
- Safari 15.4 之前版本对
scale()起始值的动画支持不稳定，建议最低设为 <code>0.8 - 如果图片父容器用了
overflow: hidden，缩放过程中边缘可能被意外裁切，需检查容器transform-style: preserve-3d或临时提升层级 - 不要在大量图片上同时启用该动画——
transform虽然高效，但密集触发动画帧仍可能造成低端设备卡顿，可加animation-play-state: paused配合 IntersectionObserver 懒启动
@keyframes，而是图片 DOM 已渲染、尺寸已知、且动画 class 在加载完成那一刻才被激活——这点最容易被忽略。 
