CSS transform animation doesn't work in Chrome

Question

The animation I created gradually slides in the element with the class of .overlay from right to left in .4 seconds by adding the .overlay-appear class to it on click. It works perfectly in Mozilla. In Chrome the slide effect doesn't take place, the element simply appears when I click that specific button. I added the vendor prefixes to keyframes, animation and transform, but the problem still persists. Maybe I'm missing something?

Here's the CSS that is relevant to the problem:

.overlay {
    position: fixed;
    background-color: rgb(49, 49, 49);
    z-index: 100;
    top: 0;
    right: 0;
    width: 0%;
    height: calc(100vh - 25px);
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 25px 50px 0 0;
}

.overlay-appear {
    animation: appear .4s forwards;
    -webkit-animation: appear .4s forwards;
    width: 50%;
    display: flex;
    transform-origin: right;
    -webkit-transform-origin: right;
}

@keyframes appear {
    0% {
        transform: scaleX(0%);
    }
    100% {
        transform: scaleX(100%);
    }
}

@-webkit-keyframes appear {
    0% {
        -webkit-transform: scaleX(0%);
    }
    100% {
        -webkit-transform: scaleX(100%)
    }
}

Answer 1

You missed the fact that transfrom:scale(); only takes simple integers (not measurements of any kind.). I don't know why Firefox CSS engine accepts that. But to make the code legal change the values.

@keyframes appear {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

The scaleX(1) means the actual size of the div as specified by its code. Any other measure there means the relative scale (and not any absolute measure).