html – I can’t position a div in CSS without it messing up the animation

I tried making a rotating square that would turn into an oval while rotating 180 degrees, the issue I encountered is that as the square rotates it moves to the left so that the top-left corner always stays in the same. Visualization of the problem. I think it’s caused by the fact that my animation changes the width of the square:

`@keyframes squarestuff {
  50% {
    transform: rotate(180deg);
    width: 5rem;
    border-radius: 50%;

Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here