切换标签页时animationPlayState无法暂停CSS动画的问题

浏览器在标签页处于后台时，会对CSS动画的时间计算进行优化（比如降低帧率或后台“快进”动画），仅靠animationPlayState无法完美同步这种行为，尤其是配合forwards填充模式时，容易出现回到前台直接跳至动画结束的情况。以下是两种可靠的解决方案：

方案一：用JavaScript手动控制动画（最稳定） #

通过requestAnimationFrame完全掌控动画进度，不受浏览器后台优化影响：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Switch Animation Control</title>
    <style>
        .box{
            width: 50px;
            height: 50px;
            background-color: red;
            position: relative;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector(".box");
        const totalDuration = 5000; // 总动画时长（毫秒）
        const targetPosition = 1000; // 目标移动距离（像素）
        let startTime = null;
        let elapsedTime = 0;
        let animationId = null;
        let isPaused = false;

        function animate(timestamp) {
            if (!startTime) startTime = timestamp;
            if (!isPaused) {
                elapsedTime = timestamp - startTime;
                const progress = Math.min(elapsedTime / totalDuration, 1);
                box.style.left = `${progress * targetPosition}px`;
                
                if (progress < 1) {
                    animationId = requestAnimationFrame(animate);
                }
            }
        }

        // 启动动画
        animationId = requestAnimationFrame(animate);

        // 监听标签页切换
        window.addEventListener("blur", () => {
            isPaused = true;
            animationId && cancelAnimationFrame(animationId);
        });

        window.addEventListener("focus", () => {
            isPaused = false;
            startTime = performance.now() - elapsedTime; // 重置起始时间，保留已播放进度
            animationId = requestAnimationFrame(animate);
        });
    </script>
</body>
</html>

方案二：修复CSS动画逻辑（保留CSS动画写法） #

通过记录动画已运行时长，恢复时重新计算剩余时长并重启动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Switch CSS Animation Fix</title>
    <style>
        @keyframes moving {
            to{
                transform: translateX(1000px);
            }
        }
        .box{
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector(".box");
        const totalDuration = 5000;
        let animationStartTime = null;
        let remainingDuration = totalDuration;
        let isRunning = true;

        // 初始化/重启动画
        function startAnimation() {
            box.style.animation = `moving ${remainingDuration}ms forwards`;
            animationStartTime = performance.now();
            isRunning = true;
        }

        startAnimation();

        window.addEventListener("blur", () => {
            if (!isRunning) return;
            // 计算已运行时长，保留当前状态
            const elapsed = performance.now() - animationStartTime;
            remainingDuration = totalDuration - elapsed;
            box.style.animation = "none";
            isRunning = false;
        });

        window.addEventListener("focus", () => {
            if (isRunning || remainingDuration <= 0) return;
            startAnimation();
        });
    </script>
</body>
</html>

原代码问题说明 #

原方案依赖animationPlayState，但部分浏览器在标签页后台时，不会真正暂停CSS动画的时间线——而是通过快进动画来节省资源，导致回到前台时动画已“完成”，直接跳至结束状态。手动控制进度的方式可以完全规避这个浏览器优化带来的问题。

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