Progressbar tag Animation not working in Chrome

I'm using slideIn animation for my progressbar. It works correctly by Firefox but somehow it stops working in Chrome.

My progress tag that im using in HTML is:

<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>

In CSS I decalred a class for animation and styling for specific browsers (Chrome & Firefox) and one keyframe for both of them:

.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);
    }
}