css动画不会因遮挡或切页自动暂停，需用visibilitychange监听页面可见性或intersectionobserver检测元素可视性来手动控制播放状态。
动画被遮挡时还在跑？用 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，也比硬刚样式属性可靠。
