In the following cases, the animated transforms slide around a bit with non-centered transform origins. This is because all properties are being transformed, including transform-origin. Over the second-long transition, the transform's origin point transforms from 50% 50% (the default) to the new value. That's why the centered case looks fine: it's transitioning from 50% 50% to 50% 50%. Fixes: either set the transform-origin on the unhovered state or only transition the transform property instead of all properties. (Thanks to Richard Herrera for helping me figure this out!)