浏览器切后台会主动降频或暂停css动画计时器，切回前台时动画重置或跳帧，属w3c规范允许的节流行为；应监听visibilitychange事件，用raf+强制重排重置动画状态。
页面切到后台后，浏览器会主动降频甚至暂停 CSS 动画计时器，切回前台时动画不是“接着播”，而是重置或跳帧——这不是 bug，是规范行为。
浏览器对后台标签页的动画节流机制
所有主流浏览器（Chrome、Firefox、Safari）在标签页不可见时，会将 requestAnimationFrame 降为约 1fps，CSS animation 和 transition 的时间轴也会被冻结或大幅减速。这是为了省电、降低 CPU/GPU 占用，W3C 规范明确允许该行为。
- Chrome 从 v50 起默认启用该策略；Safari 在 iOS/iPadOS 上更激进，可能完全暂停动画
- 即使你写了
animation: spin 2s linear infinite，切走再切回，指针可能卡在 120°、跳到 240°，或直接重播第一帧 - DevTools 的 Performance 面板里能看到：切后台后
Animation事件几乎消失，Idle时间占比飙升
transition 动画在切回时突变而非继续
这通常发生在你依赖 JS 控制 class 切换（比如 element.classList.add('is-open')）但没处理 visibility 状态。切后台期间 DOM 样式未更新，切回瞬间浏览器“补帧”，导致 transition 从旧值直接跳到目标值，跳过中间过程。
- 错误模式：
button.addEventListener('click', () => menu.classList.toggle('open'))—— 没防后台状态 - 修复关键：监听
visibilitychange，在切回前台时重置动画状态或延迟触发 - 推荐写法：
window.addEventListener('visibilitychange', () => { if (!document.hidden) { // 延迟一帧，确保 layout 完成 requestAnimationFrame(() => { menu.style.animation = 'none'; menu.offsetHeight; // 强制重排，清空动画缓存 menu.style.animation = ''; }); } });
@keyframes 动画恢复后掉帧或错位
本质是动画时间戳不连续。浏览器恢复时，不会把后台“欠的”时间补上，而是以当前时间为起点重新计算——如果原动画含 transform + opacity 复合变化，且 timing-function 不是线性，就容易出现视觉错位。
- 避免复合属性混动：一个
@keyframes里只动transform或只动opacity，别同时写transform: scale()和background-color - 用
animation-play-state: paused主动控制，比依赖浏览器自动暂停更可靠 - 对关键交互动画（如模态框淡入），切回前台后手动重播：
el.animate(...)替代纯 CSS，可精确控制起始时间
真正难处理的不是“怎么让它动”，而是“怎么让它动得像没停过”——这需要放弃“无缝续播”的执念，转而用 visibilitychange + rAF + 状态重置组合拳，在切回瞬间重建动画上下文。否则任何 trick 都只是掩盖问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
