Animating %-valued translate transforms fails when chained with another transform
Issue #9457269 • Assigned to Rick J.
Steps to reproduce
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.
You need to sign in to your Microsoft account to add a comment.
Sign in