Animating %-valued translate transforms fails when chained with another transform

1. Create 2 identically sized, absolutely positioned divs that initially sit on top of each other.

2. On the first div, apply the following transform chain:

transform: translate(50%) rotate(90deg);

This first transform function (translate(50%)) moves the element in the positive direction along the x axis (to the right) by half its size along the x axis.

The second transform function (rotate(90deg)) rotates it in the positive direction (clockwise) around the z axis (coming out of the screen towards us).

3. On the second div, set the following keyframe animation:

@keyframes a {
    0%, 25% { transform: none; }
    50% { transform: translate(50%); }
    75%, 100% {
        transform: translate(50%) rotate(90deg);
    }
}

This should animate the second div in stages until it’s on top of the first one again. This is what happens in Chrome or Firefox.

In Edge, the translate(50%) doesn’t happen, just the rotate(90deg). Same issue when using translateX() or translateY() instead of translate(). Same issue when chaining with another rotation function, with a skew or px-valued translate function instead of rotate().

Using a length-valued translate() (px, vh) works as expected.

Test https://codepen.io/thebabydino/pen/GjPvPQ?editors=0100