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>>Solution :
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>