Gummybaar Gummybaar - 1 month ago 5
CSS Question

How do i get my css3 animation smooth?

I've been working on my portfolio lately, but the problem is that the image animation that i wrote jitters in the end.

Here is a link to the website

Here is the code:



@keyframes mymove {
0% {top: 0px;}
50% {top: 25px;}
100% {top: 0px;}
}

img {
animation: mymove 5s infinite;
}

<img src="http://pngimg.com/upload/small/basketball_PNG1096.png">




Answer

This happens when the movement is very little and the animation duration is long (in your case 25px in 5 seconds), that means less values to interpolate over a long duration.

If you increase the top value or decrease the duration (better if you do both), you won't have this jagged animation