CSS hover/取消hover时动画出现意外像素跳动的原因

问题现象 #

• 悬停（hover）在tile（方块）上时，动画表现正常：背景tile旋转45°，房屋图标通过rotate(-45°)抵消旋转保持静止
• 取消悬停（移出hover）时，背景tile平滑旋转回原状态，但图标会突然向左跳动1-2像素；还有其他图标向下跳动、部分tile向右跳动的情况

相关代码 #

HTML/JSX：

<div className="end__tile">
  <Link to="/">
    <ImHome className="end__icon" size={50} />
  </Link>
</div>

SCSS：

.end {
  &__container {
    ...
  }
  &__icon {
    color: $text;
    transition: 500ms;
  }
  &__tile {
    background-color: $background;
    width: 4em;
    height: 4em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: 500ms;

    &:hover {
      transform: rotate(45deg) scale(1.2);
      transition: 500ms;
      background-color: $detail;
    }
    &:hover .end__icon {
      transform: rotate(-45deg);
      transition: 500ms;
      color: $accent;
    }
    &:active {
      transform: rotate(180deg) scale(0.9);
      transition: 500ms;
      background-color: $text;
    }
    &:active .end__icon {
      transform: rotate(-180deg);
      transition: 500ms;
      color: $background;
    }
  }
}

问题原因分析 #

这种跳动本质是动画结束时元素渲染位置与初始布局位置不匹配，核心原因有三点：

1. transform变换的精度偏差：默认transform-origin为元素中心，但旋转+缩放时，浏览器计算位置的浮点精度可能出错，动画回退时无法完全对齐初始像素位置。
2. 未显式声明默认状态的transform：代码仅在:hover/:active时设置transform，默认状态无明确值，浏览器回退时可能重新计算布局而非基于初始过渡状态，导致跳变。
3. flex布局的对齐误差：父元素旋转缩放后，flex居中的子元素对齐计算出现微小偏差，父元素恢复状态时，子元素无法精确回归原位。

解决方案 #

1. 显式声明所有状态的transform初始值：
   给图标和方块的默认状态添加明确的transform，确保动画回退有清晰目标：

   .end__icon {
     color: $text;
     transition: 500ms;
     transform: none; /* 显式初始状态 */
   }
   .end__tile {
     /* 原有样式 */
     transform: none; /* 显式初始状态 */
   }
   

2. 固定变换原点：
   给方块和图标明确设置transform-origin，统一旋转缩放的基准点：

   .end__tile, .end__icon {
     transform-origin: center center;
   }
   

3. 优化渲染精度：
   添加will-change让浏览器提前准备渲染资源，减少计算误差：

   .end__tile, .end__icon {
     will-change: transform;
   }
   

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