Gummybaar Gummybaar - 1 year ago 62
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="">

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download