CODEWITHSUNDEEP
csscss-animations
Timothy Pulliam
Timothy Pulliam

Reputation: 142

css animation is stretched out

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>

Upvotes: 0

Views: 535

Answers (1)

Michael Haddad
Michael Haddad

Reputation: 4435

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>

Upvotes: 1

Related Questions