CSS动画遮挡暂停技巧解析

CSS动画默认不会因页面切后台、元素被遮挡或滚动出视口而自动暂停，持续运行不仅浪费性能，还易引发时间错乱、跳帧、事件漏触发等问题；本文深入剖析了两种精准控制方案——用`visibilitychange`事件应对整页不可见场景，以`IntersectionObserver`实现对局部可视性的细粒度监听，并澄清了`will-change`和`contain`等常见误区，同时提醒开发者注意暂停恢复时`animation-delay`、迭代计数及时间轴连续性带来的陷阱，最终指出在复杂交互中转向Web Animations API才是更可靠的选择。

动画被遮挡时还在跑？用 document.visibilityState 手动控制

浏览器不会自动暂停 CSS 动画，哪怕元素被滚动出视口、被其他 DOM 遮盖、甚至标签页切到后台——@keyframes 依然在计时、animation-play-state 仍为 running。这不是 bug，是规范行为。真要停，得自己监听可见性变化。

最直接的办法是监听 visibilitychange 事件，配合 document.visibilityState 判断当前页面是否可见：

document.addEventListener('visibilitychange', () => {
  const animEl = document.querySelector('.my-anim');
  if (document.visibilityState === 'hidden') {
    animEl.style.animationPlayState = 'paused';
  } else {
    animEl.style.animationPlayState = 'running';
  }
});

• 只对「整个页面不可见」（如切到其他 tab、最小化窗口）有效；元素局部被遮挡或滚动出视口时，visibilityState 仍是 visible，这个方法不触发
• 注意：该事件不冒泡，不能委托；多个动画元素需统一管理状态，避免重复设置样式
• 如果动画依赖 JS 控制（比如用 animationName 切换），记得同步清理 animationIteration 等事件监听器，否则可能漏掉回调

元素滚出视口或被遮挡？上 IntersectionObserver 更精准

IntersectionObserver 能感知元素是否在视口内、是否被父容器裁剪、甚至是否被其他元素完全盖住（取决于 threshold 和 rootMargin）。它比 visibility API 更适合处理「局部不可见」场景。

关键点在于：它只管「是否相交」，不直接控制动画，你需要自己映射状态：

const io = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const el = entry.target;
    el.style.animationPlayState = entry.isIntersecting ? 'running' : 'paused';
  });
}, { threshold: 0.01 }); // 1% 可见即算“可见”

io.observe(document.querySelector('.my-anim'));

• threshold: 0 表示只要有一个像素相交就触发；设为 0.01 可避免因浮点误差导致的抖动
• 若元素被 overflow: hidden 的父容器裁剪，且你希望「完全不可见才暂停」，需确保 root 正确设为该父容器，否则默认以 viewport 为根
• 注意兼容性：IntersectionObserver 在 iOS Safari 12.2+、Chrome 51+ 支持良好；老版本需降级为 getBoundingClientRect() + scroll 节流，但开销大、易误判

为什么不用 will-change: transform 或 contain: paint 来优化？

这两个属性常被误认为能「暂停动画」，其实它们只影响渲染管线的优化策略，和动画生命周期无关。

• will-change: transform 是提示浏览器提前升格图层，减少重绘；但它不阻止 animation 计时器运行，CPU/GPU 时间照耗
• contain: paint 可让浏览器跳过对不可见区域的绘制，但动画帧仍在执行，animationiteration 事件照样触发，JS 逻辑仍会跑
• 真正省资源的方式，是停掉动画本身（animation-play-state: paused）或卸载元素（display: none），而不是靠渲染提示

动画暂停后时间错乱？留意 animation-delay 和重播逻辑

手动暂停/恢复动画时，最容易忽略的是：CSS 动画的时间轴是连续的。暂停再恢复，animation-delay 不会重置，animation-iteration-count 的计数也不会回退——这会导致恢复后跳帧、循环次数异常、甚至卡在中间状态。

• 如果动画只需播一次（animation-iteration-count: 1），暂停后再恢复，它不会继续播，因为已「完成」；此时应重置：先 animation: none，再重新设回原动画名
• 涉及 animation-delay 的场景（比如轮播图淡入前等 300ms），暂停期间 delay 倒计时仍在走；恢复时可能直接跳进动画，失去等待效果
• 更稳妥的做法：用 el.getAnimations()（返回 Animation 对象数组）来精确控制，调用 pause()/play()，并监听 onfinish；但注意该 API 在 Safari 中支持有限，且需开启实验性功能

复杂动画链、带 JS 交互的序列、或需要精确时间锚点的场景，纯 CSS 控制容易失控；这时候该切到 Web Animations API，哪怕只用来 pause/resume，也比硬刚样式属性可靠。

以上就是《CSS动画遮挡暂停技巧解析》的详细内容，更多关于的资料请关注golang学习网公众号！