React中使用CSS动画缩放span时其他元素位移如何解决？

问题原因 #

你当前使用修改font-size的方式实现缩放效果，该属性会改变元素在文档流中的实际占位尺寸，触发页面重排，因此会挤压、带动周围其他元素同步位移。

解决方案 #

改用transform: scale()实现视觉缩放，该属性不会修改元素在文档流中的实际占据空间，仅触发图层重绘，不会影响其他元素的位置。同时需要注意：

• 行内元素默认不支持transform属性，需要给目标span设置display: inline-block
• 建议将基础字号设为动画的最大字号45px，通过缩小再放大的方式实现动画，避免文字放大时出现模糊
• 可调整transform-origin控制缩放的锚点，比如设置为left center可以实现沿着左侧中线缩放，和左侧的TEST文本对齐更自然

修改后代码 #

.textdiv {
  display: inline-block;
  font-size: 45px; /* 基础字号设为最大值，避免缩放模糊 */
  animation: textgrowth 1s infinite alternate;
  transform-origin: left center; /* 可按需调整缩放锚点 */
}

@keyframes textgrowth {
  0% {
    transform: scale(0.89); /* 40/45≈0.89，对应原最小字号的视觉大小 */
  }
  100% {
    transform: scale(1);
  }
}

原有JSX代码无需修改即可生效。

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