Css animate infinite animated line

Question

Not sure if this can be done with css, otherwise I will look for a way to do it with js. I want to create an infinite and smooth animation which constantly repeats itself.

This dotted arrow line should be constantly flowing without ending.

[ICON] --->--->----> [ICON]

I'm not getting very far with css here.

.arrows {
  position: absolute;
  animation: arrows 2s infinite;
  animation-iteration-count: infinite;
}
@keyframes arrows {
  0% {
    left: 0px;
  }
  50% {
    left: 5px;
  }
  80% {
    left: 15px;
  }
  100% {
    left: 0px;
  }
}

<div class="arrows">-->-->--></div>

The problem for me is not to make the animation smoother, but to let the arrows repeat them self without jumping pack to the starting point of 0px

thanks

Answer 1

.arrows {
  position: absolute;
  animation: arrows 1s infinite;
  animation-iteration-count: infinite;
   -webkit-animation: arrows 1s;  /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;  /* Chrome, Safari, Opera */
}
@keyframes arrows {
  0% {
    left: 10%;
  }
  100% {
    left: 80%;
  }
}

<div class="arrows">-->-->--></div>