How can I make the animation smoother-CodePudding

I have made an animation in which the image floats.

But the image seems to be vibrating when reaching the end.

Here is the website where the image is link

This is the CSS if the div wrapping the img

.newImg {
    position: relative;
    width: 472px;
    height: 414px;
    animation-name: updown;
    animation-duration: 5s;
    /* animation-delay: 1.5s; */
    animation-iteration-count: infinite;
    transition-timing-function: ease-in-out;
}

@keyframes updown {
    0% {
        top: 0px;
    }

    25% {
        top: 8px;
    }

    50% {
        top: 0px;
    }

    75% {
        top: 8px;
    }

    100% {
        top: 0px;
        ;
    }
}

CodePudding user response：

The vibration you see because of the top property. Try using translateY() instead. It will perform faster, animate smoother, and won't affect the layout.

@keyframes updown {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(8px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(8px);
    }

    100% {
        transform: translateY(0);
    }
}