Microsoft Edge – Animation Error

[Rhino.Freak]

http://codepen.io/RhinoFreak/pen/WxbYVY

Just look at this from Microsoft Edge browser and you’ll know what I’m talking about.
How do I fix this? This is such a simple animation I don’t believe Edge doesn’t support a few rotations and translations!

Please help!

[Beverleyh]

Hmmm, interesting – it doesn’t seem to like the ‘bottom’ keyword against transform-origin.

Try using % values instead;

transform-origin: 100%;

[Rhino.Freak]

Thank you!! You saved me!
one last question is that, the proper equivalent of transform-origin: bottom would be transform-origin: 50% 100% right?

[Beverleyh]

Yes, ‘50% 50%’ is default so ‘50% 100%’ is the equivalent of ‘center bottom’

[Author]

Posts