使用transform: scale搭配transform-origin: top时动画初始出现小跳动问题

问题原因 #

出现跳动是两个设置错误共同导致的：

1. transform-origin仅在:hover规则中声明，元素默认状态的transform-origin是浏览器默认值50% 50%（即元素中心）。同时你配置了transition: all 2s，所有属性变化都会触发过渡，transform-origin也会从中心向顶部做过渡动画，缩放原点在整个动画过程中持续变化，就会出现视觉上的向上跳动效果。
2. 边框宽度默认是2px，:hover时改为1px，同样被纳入过渡范围，元素实际渲染尺寸在过渡过程中持续缩小，也会加重位置偏移的感知。

修复方案 #

你可以按以下步骤调整代码：

• 将transform-origin: top移到默认的.plus-sign规则中，保证缩放原点全程固定，不会参与过渡
• 调整transition配置，仅对需要动画的属性生效，避免无关属性触发过渡
• 可选：给元素加box-sizing: border-box，或者保持边框宽度一致，避免元素本身尺寸变化影响视觉效果

修复后的参考代码：

.plus-sign {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: white;
  border: 2px solid #3b3b3b;
  outline: 3px solid white;
  /* 固定缩放原点 */
  transform-origin: top;
  /* 仅指定需要过渡的属性 */
  transition: transform 2s ease-in-out, border-color 2s ease-in-out;
  position: absolute;
  box-sizing: border-box;
}

.plus-sign:hover {
  transform: scale(2);
  border-color: #ff6250;
}

<div class="plus-sign"></div>

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