How to make a looped animation?

Question

css

There is a block with an image on it through css background-image, it needs to be animated so that the picture moves to the right all the time, I did this through css animation like this:

@keyframes loading {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 100px;
  }
}

animation: loading 1s infinite;
But it twitches, it is clear that the keyframe breaks. How to fix?

Answer 1

codepen.io/THISISHAPPI/pen/RaMmYq