My CSS "absolute, left 10px" moves when animated
Here is my Codepen project https://codepen.io/iBlackwolf/pen/RwvEKOZ
I am trying to make my menu shrink in size when closed, but remain 10px from the left of the div. I have no idea why is moves to the right.
The actual animation is supposed to take 1 second, but I have slowed it down so you can see the effect better
6 Replies
Try adding
transform-origin: left; on the ul, if I understood it correctly this should be something similar to what you're after?do you know what is actually happening? just so I understand it. in my mind, left 10px should mean that and never change
your solution works, brilliant, thank you. now people can use my code 🙂
The issue is with the
transform: scale, as it gets smaller all around uniformly unless you specify otherwise.In fact you can get rid of the left: 10px and it would still work. You can see this in action better if you speed up the animation, you'll see it stays centered as it scales down fully.
I'm not quite sure of all the details of how exactly it works though. When transforms are involved, messing with the origin is often the right calli was just wondering why the left: 10px does not keep its position
i have speeded it up to 600ms now. it was only slowed to see the effect going wrong
i understand that the whole thing scales from a central point, but the smaller scaled version should still be 10px from the left in my mind
It's possible that the transition of the width property messes things up.
width is a property that causes layout shift, so the inside content may not be able to correctly locaate where 10px is as it transitionsoh, sounds strange, but YAY for transform-origin 🙂