I was recently working on a project that involved a fair bit of CSS animation and I discovered that the order in which the transform functions are ordered in your markup can affect the display. Specifically putting scale(1.2) before translateX(-50%) shifts the element off center. But if the translate is first, then the scale everything works.
Click on the “Result” tab and hover over red boxes to see the behavior.
Play with this gist on SassMeister.
I’m not sure if this is a bug in the implementation or what but it’s a gotcha that I stumbled over so I wanted to share it.