为何CSS动画中rotate过渡效果表现与预期不符？

问题说明 #

用@keyframes实现元素绕左上角旋转时，黑色条形元素会出现向下晃动的情况，但通过hover触发的过渡效果却能正常实现目标旋转。多次遇到该问题，无法定位两段代码的差异，需要修复动画代码使其和hover效果一致。

有问题的动画代码 #

@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>

期望的hover效果代码 #

.box{
  position:absolute;
  height:10px;
  width:150px;
  background-color:black;
  top:50%;
  left:50%;
  border-radius:5px;
}
.box:hover{
  transition:transform 1s linear;
  transform-origin:top left;
  transform:rotate(-50deg); 
}

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

问题原因与修复方案 #

• 问题根源：

  1. transition是过渡动画属性，不能放到@keyframes关键帧里，动画的时间控制由animation-duration负责
  2. transform-origin在关键帧中设置，会导致动画过程中旋转原点从默认的center突然切换到top left，引发晃动
  3. 未定义@keyframes的初始状态（0%关键帧），浏览器自动推断初始状态可能出现异常

• 修复后的代码：

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

.box{
  position:absolute;
  height:10px;
  width:150px;
  background-color:black;
  top:50%;
  left:50%;
  border-radius:5px;
  transform-origin: top left; /* 固定旋转原点到左上角，避免切换 */
  animation-name: rightup;
  animation-duration: 5s;
  animation-timing-function: linear; /* 和hover的过渡曲线保持一致 */
}

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

内容的提问来源于stack exchange，提问作者JuicyM0N