CSS steps animation shaking image - html

Question

I'm trying to do a simple animation but the result isn't smooth.
.animate {
animation: infinity 1.5s steps(27) forwards;
}
#keyframes infinity {
100% {
background-position: -5778px;
}
}
<div class="animate" style="width:214px; height:32px; background-image:url(https://i.hizliresim.com/gOggGZ.png); background-repeat: no-repeat;"></div>
So is there any way to remove that shaking?

Answer 1

We can't see the snippet, please fix it so we can help better.
On a side note, if the animation is not smooth, maybe transition will help. You can't give the number of steps as 'steps(3)', there is a CSS property
animation-iteration-count: 3;
which determines how many times it should be repeated after completing one full loop. You can use 'infinite' too.
Also, you should maybe also define the 0% for better control over the element animation you want.
.animate {
animation: infinity 1.5s linear forwards; /*add transition here */
animation-iteration-count: 3;
}
/* or on the element itself */
.elementclassname {
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
#keyframes infinity {
0% {
background-position: 0px;
}
100% {
background-position: -300px;
}
}

Answer 2

Changing animation-timing-function to ease-in-out gives smooth animation.
.animate {
animation: infinity 1.5s ease-in-out forwards;
}
#keyframes infinity {
0% {
background-position: 0px;
}
100% {
background-position: -300px;
}
}
<div class="animate" style="width:200px; height:100px; background-image:url(https://preview.ibb.co/k2cREc/banner_about.jpg); background-repeat: no-repeat; -webkit-transform: rotate(-8deg);-moz-transform: rotate(-8deg);-o-transform: rotate(-8deg);-ms-transform: rotate(-8deg); transform: rotate(-8deg);"></div>

Answer 3

You are explicitly asking CSS to make an animation with 3 steps, this is why your animation isn't smooth.
Simply remove the steps(3) part and you'll be good!
.animate {
animation: infinity 1.5s forwards;
width: 100px;
height: 50px;
background: url('https://i.imgur.com/M5XHVHu.jpg');
background-repeat: no-repeat;
transform: rotate(-8deg);
}
#keyframes infinity {
100% {
background-position: -300px;
}
}
<div class="animate"></div>