CSS animation运行时圆形被拉伸 如何避免x轴方向拉长变形？

你为圆形元素和文本共用了同一个修改width属性的slidein动画，圆形需要保持宽高1:1比例才能通过border-radius:50%呈现正圆效果，动画执行过程中宽度被动态修改为父容器宽度的300%、100%，高度始终固定为50px，比例被破坏就会出现拉伸变形，动画结束后宽度恢复为50px才回到正圆。

方案1：拆分动画，圆形使用位移属性实现动画（推荐） #

位移属性transform: translateX不会修改元素本身的尺寸，也不会触发页面重排，性能优于修改margin和width的方案，圆形始终保持宽高1:1不会变形。

修改后的代码： #

p {
  animation-duration: 3s;
  animation-name: slidein;
}

.ball {
  border-radius: 50%;
  background: blue;
  height: 50px;
  width: 50px;
  display: inline-block;
  animation-duration: 3s;
  animation-name: slideBall; /* 绑定专属位移动画 */
}

.animation-container {
  overflow: hidden;
}

/* 原动画保留给p标签使用 */
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

/* 圆形专属动画：仅修改位移，不修改尺寸 */
@keyframes slideBall {
  from {
    transform: translateX(calc(100vw - 50px)); /* 从视口右侧外滑入，可根据实际布局调整数值 */
  }
  to {
    transform: translateX(0);
  }
}

HTML代码无需修改。

方案2：嵌套动画容器，不修改原有动画逻辑 #

如果需要保持圆形和p标签的动画逻辑完全一致，可给圆形外层嵌套一个独立容器，动画作用于外层容器，圆形本身尺寸不受影响。

修改后的代码： #

p {
  animation-duration: 3s;
  animation-name: slidein;
}

.ball {
  border-radius: 50%;
  background: blue;
  height: 50px;
  width: 50px;
  display: inline-block;
  /* 去掉原本绑定的slidein动画 */
}

.ball-wrapper {
  animation-duration: 3s;
  animation-name: slidein;
}

.animation-container {
  overflow: hidden;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

<div class="animation-container">
  <p>hello world</p>
</div>

<div class="animation-container">
  <!-- 新增外层容器承载动画 -->
  <div class="ball-wrapper">
    <div class="ball"></div>
  </div>
</div>

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