css动画被拉长

Question

我的圆圈动画看起来拉长了？如何使圆在 x 轴上看起来不拉长？它在动画期间伸展，然后 returns 在动画结束后恢复正常。

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: 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"></div>
</div>

Answer 1

好吧，您正在将 width 从 300% 设置为 100%。删除它会修复它。

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: slidein;
}

.animation-container {
  overflow: hidden;
}

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

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

<div class="animation-container">
  <div class="ball"></div>
</div>

css动画被拉长

css animation is stretched out

css

css-animations