如何基于visibilitychange事件正确暂停CSS动画并保留状态？

你的问题核心在于，仅在页面隐藏时设置animationPlayState: 'paused'无法精准冻结动画进度——部分浏览器在标签页后台时仍会继续推进动画的时间轴，导致返回时动画状态和离开时不一致。以下是无需复杂技巧的优化方案，基于CSS动画结合少量JS实现精准控制：

优化思路 #

• 同时监听页面隐藏和显示状态，分别处理动画的暂停与恢复
• 记录动画的实际运行时长，通过调整animation-delay确保动画从暂停位置继续，而非依赖浏览器默认的暂停机制

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .progress-container {
            width: 100%;
            height: 30px;
            background-color: #f3f3f3;
        }

        .progress-bar {
            height: 100%;
            width: 0;
            background-color: #4CAF50;
            animation: progress 30s linear forwards;
            /* 添加forwards让动画结束后保持最终状态 */
        }

        @keyframes progress {
            from { width: 0; }
            to { width: 100%; }
        }
    </style>
</head>
<body>
<div class="progress-container">
    <div class="progress-bar" id="progressBar"></div>
</div>
<script>
    const progressBar = document.getElementById('progressBar');
    let animationStartTime = null;
    let pausedDuration = 0;
    const totalAnimationDuration = 30000; // 对应CSS中的30s，转成毫秒

    // 初始化动画开始时间
    window.onload = function() {
        animationStartTime = performance.now();
        progressBar.style.animationPlayState = 'running';
    };

    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            // 页面隐藏时：暂停动画，记录当前进度
            progressBar.style.animationPlayState = 'paused';
            // 计算已运行的有效时长（扣除之前的暂停时间）
            const elapsed = performance.now() - animationStartTime - pausedDuration;
            // 用负延迟让动画停在当前进度位置
            progressBar.style.animationDelay = `-${elapsed / 1000}s`;
        } else {
            // 页面显示时：恢复动画，更新累计暂停时长
            const currentElapsed = performance.now() - animationStartTime - pausedDuration;
            pausedDuration += performance.now() - (animationStartTime + pausedDuration + currentElapsed);
            progressBar.style.animationPlayState = 'running';
        }
    });
</script>
</body>
</html>

关键细节说明 #

• 负animation-delay的作用：负延迟值会让动画直接从对应进度的位置启动，比如-10s表示动画跳过前10秒，直接显示已运行10秒的状态
• performance.now()的精准性：相比Date.now()，它提供了不受系统时间调整影响的高精度时间戳，确保时长计算准确
• forwards填充模式：让动画结束后保持width: 100%的最终状态，避免自动重置

如果完全不想依赖CSS动画的时间机制，也可以用纯JS通过setInterval直接更新进度条宽度，但上述方案保留了CSS动画的简洁性，仅用少量JS做状态同步，符合你的需求。

内容的提问来源于stack exchange，提问作者sede10g