Why does rotate transition work differently in animation?

January 16, 2023

In this code when, when rotating along top left point , the bar sways a lil bit down , while rotating
have seen this multiple time , sometimes it gets fixed , but i cannot spot the diff.

@keyframes rightup{
  100%{
    transition:transform 1s linear;
    transform-origin:top left;
    transform:rotate(-50deg); 
  }
}

.box{
  position:absolute;
  height:10px;
  width:150px;
  background-color:black;
  top:50%;
  left:50%;
  border-radius:5px;
  animation-name:rightup;
  animation-duration:5s;
}

<div class="box"></div>

wanted something like this

.box{
  position:absolute;
  height:10px;
  width:150px;
  background-color:black;
  top:50%;
  left:50%;
  border-radius:5px;
  animation-name:rightup;
  animation-duration:5s;
}
.box:hover{
  transition:transform 1s linear;
    transform-origin:top left;
    transform:rotate(-50deg); 
}
<div class="box"></div>

>Solution :

In the animation you aren’t setting the transform-origin to the left top right from the start, but you are doing so in the transition/transform example.

Also, a minor point for such a slim bar but it makes a slight difference, you are rotating about the top of the bar rather than the (vertical) center.

This snippet changes both these things:

@keyframes rightup {
  0% {
    transform-origin: center left;
  }
  100% {
    transform-origin: center left;
    transform: rotate(-50deg);
  }
}

.box {
  position: absolute;
  height: 10px;
  width: 150px;
  background-color: black;
  top: 50%;
  left: 50%;
  border-radius: 5px;
  animation-name: rightup;
  animation-duration: 5s;
}