Firefox中环形进度条无动画，Chrome正常的技术问题求助

问题根源 #

1. 关键帧语法错误：@-webkit-keyframes定义后未闭合大括号，导致@-moz-keyframes被错误嵌套，Firefox无法正确识别关键帧规则。
2. 动画名称不匹配：JS代码中将元素的animationName设置为MyAnimations，但CSS中定义的动画关键帧名称是progress-animation，两者不匹配导致动画无法触发。
3. 冗余前缀与重复配置：当前Firefox已支持标准@keyframes，无需@-moz-keyframes前缀；同时JS中重复设置了animation-duration，属于冗余操作。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Circular Progress Countdown</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .circular-progress {
            --size: 250px;
            --half-size: calc(var(--size) / 2);
            --stroke-width: 20px;
            --radius: calc((var(--size) - var(--stroke-width)) / 2);
            --circumference: calc(var(--radius) * pi * 2);
            --dash: calc((var(--progress) * var(--circumference)) / 100);
            animation: progress-animation 5s linear 1s 1 forwards !important;
        }

        .circular-progress circle {
            cx: var(--half-size);
            cy: var(--half-size);
            r: var(--radius);
            stroke-width: var(--stroke-width);
            fill: none;
            stroke-linecap: round;
        }

        .circular-progress circle.bg {
            stroke: #ddd;
        }

        .circular-progress circle.fg {
            transform: rotate(-90deg);
            transform-origin: var(--half-size) var(--half-size);
            stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
            stroke: blue;
            transition: stroke-dasharray 0.3s linear 0s;
        }
        .countdown {
            color: #5394fd;
        }
        @property --progress {
            syntax: "<number>";
            inherits: false;
            initial-value: 0;
        }
        @-webkit-keyframes progress-animation {
            from {
                --progress: 0;
            }
            to {
                --progress: 100;
            }
        }
        @keyframes progress-animation {
            from {
                --progress: 0;
            }
            to {
                --progress: 100;
            }
        }
    </style>
</head>
<body>

<div class="circular-progress-description">
    <p>Estimated wait time: <span class="duration">5</span> seconds.</p>
    <svg width="250" height="250" viewBox="0 0 250 250" id="circular-progress" class="circular-progress">
        <circle class="bg"></circle>
        <circle class="fg"></circle>
        <text id="countdown" x="125" y="125" text-anchor="middle" dy="7" font-size="20"></text>
    </svg>
</div>

</body>
<script>
    (function() {
        let duration = 10;
        console.log(`Running for ${duration} seconds`)
        const progressBar = document.getElementById("circular-progress");
        document.getElementsByClassName("duration")[0].innerHTML=`${duration}`;
        document.getElementById("countdown").innerHTML=`${duration}`;
        progressBar.style.animationDuration = `${duration}s`;
        progressBar.addEventListener("animationend", function() {
            location.reload(true);
        });

        // 新增倒计时数字动态递减逻辑
        let countdownTimer = setInterval(() => {
            duration--;
            document.getElementById("countdown").innerHTML = `${duration}`;
            if (duration <= 0) {
                clearInterval(countdownTimer);
            }
        }, 1000);
    })();
</script>
</html>

额外优化说明 #

• 补全了@-webkit-keyframes的闭合括号，确保CSS规则解析正确。
• 移除了冗余的@-moz-keyframes前缀，Firefox当前支持标准@keyframes。
• 修正了JS中动画名称的错误设置，保持与CSS关键帧名称一致。
• 新增了倒计时数字动态递减的逻辑，让组件功能更完整。

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