Perfectly smooth looped eased css animation

Posted 2 months ago by Gabotronix

Hi everybody, I'm trying toanimate an element to slowly move from left to right a small ammount of distance and do it in a smooth way but the result is not very good.

Here is what I have so far:

.animate_sideways{animation:sideways 5s linear infinite; animation-timing-function: ease-in, ease-in-out;};
@keyframes sideways {
  50% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(-30px);
  }
}

Please sign in or create an account to participate in this conversation.