My circle animation looks stretched out? How can I make the circle not look elongated in the x axis? It stretches out during the animation and then returns back to normal after the animation has finished.

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Well, you are animating your width from 300% to 100%. Removing this will fix it.

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>