google-chrome - 进度条标记动画在 Chrome 中不起作用

Question

我正在为我的进度条使用 slideIn 动画。它可以在 Firefox 中正常工作，但不知何故它在 Chrome 中停止工作。

我在 HTML 中使用的进度标签是：

<progress class="progress-slideIn" 
          style="height: 6px;
                        /* animation trigger */
                        /* ignored in IE 11 */
                        --animation-delay: {{ loop.index**1.5 / 3.4 }}s;

                        /* hide animated bar */
                        overflow: hidden;

                        /* remove progress styling */
                        -webkit-appearance: none;
                        appearance: none;
                    " value="20" max="50">
ProgressBar</progress>

在 CSS 中，我为特定浏览器（Chrome 和 Firefox）贴了一个动画和样式类，并为它们两个都设置了一个关键帧：

.progress-slideIn::-webkit-progress-value {
    animation: 2s progress-slideIn;

    /* inherit delay per element */
      animation-delay: var(--animation-delay);
    /* initial state */
      transform: translateX(-100%); 
    /* keep final state */
      animation-fill-mode: forwards;
}
.progress-slideIn::-moz-progress-bar {
    animation: 2s progress-slideIn;

    /* inherit delay per element */
      animation-delay: var(--animation-delay);
    /* initial state */
      transform: translateX(-100%);
    /* keep final state */
      animation-fill-mode: forwards;

}
@keyframes progress-slideIn {
    100% {
        transform: translateX(0);
    }
}

标签： google-chromeanimationprogress-bar