css 想让图片在滚动到可视区域时播放动画怎么办_利用 keyframes 和交叉观察器触发动画_技术教程

IntersectionObserver 判断图片是否进入可视区的核心是监听元素是否出现在视口内，而非依赖 scroll 事件反复计算位置；需设 threshold 为 [0] 或配合 rootMargin 提前触发，仅观察带 animate-on-enter 类的 img，触发后添加 is-animated 类并停止观察，动画由 CSS 控制且初始状态禁用，兼容性差时需降级为节流的 scroll + getBoundingClientRect。

用 IntersectionObserver 判断图片是否进入可视区

核心是监听元素是否出现在视口内，而不是靠 scroll 事件反复计算位置——后者性能差、易卡顿，且在 Safari 或低配设备上容易漏触发。

关键点：

IntersectionObserver 的 threshold 设为 [0]（默认）即可在元素刚进入视口时触发；若想更早触发（比如提前 50px），可设为 [0.1] 或配合 rootMargin
只对带特定 class（如 animate-on-enter）的初始化观察器，避免全局监听开销
触发后立即调用 observer.unobserve(el)，防止重复执行动画

给图片加 keyframes 动画并控制播放时机

动画本身写在 CSS 里，但初始状态必须是“未激活”，否则页面加载时就播了。常见错误是直接给 img 写 animation: fade-in 0.6s ease-out —— 这会导致所有图片一上来就动。

正确做法是用一个 class 控制动画开关：

定义 @keyframes（例如 fade-in、slide-up）
img 默认不设动画，只设 opacity: 0; transform: translateY(20px);
添加类名（如 is-animated）后才启用动画和最终态样式

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

img.animate-on-enter {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img.animate-on-enter.is-animated {
  opacity: 1;
  animation: fade-in 0.6s ease-out forwards;
}

JS 绑定观察器 + 添加动画 class

注意不要在 callback 里直接操作 style，而是加 class——这样更利于复用、调试和 CSS 覆盖。

示例逻辑：

筛选所有 document.querySelectorAll('img.animate-on-enter')
创建 IntersectionObserver 实例，rootMargin 可设为 '0px 0px -50px 0px' 让动画略早于真正进入视口触发
回调中检查 entry.isIntersecting，为真则添加 is-animated 类，并停止观察该元素

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-animated');
      observer.unobserve(entry.target);
    }
  });
}, {
  rootMargin: '0px 0px -50px 0px'
});

document.querySelectorAll('img.animate-on-enter').forEach(img => {
  observer.observe(img);
});

兼容性与 fallback 注意点

IE 完全不支持 IntersectionObserver，Safari 12.1+ 才支持。如果需兼容旧版 Safari 或 IE，得降级为 scroll 事件 + getBoundingClientRect()，但务必加节流（throttle）。

另外几个容易踩的坑：

图片没设置宽高或没加载完成时，getBoundingClientRect() 可能返回 { height: 0 }，导致观察器误判；建议先等 img.onload 或用 loading="lazy" 配合 decode() 提前解码
CSS 动画的 forwards 必须写，否则动画结束后会回退到初始状态（比如又变透明）
如果图片是响应式（max-width: 100%），确保父容器有明确宽度，否则动画位移可能错位

动画真正生效的关键不在