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>

Answer 2

Not quite good, but might be useful for you:

.arrows-container
{
  position: relative;
  overflow: hidden;
  width: 8ex;
  background-color: #ddd;
  height: 1em;
}
.arrows {
  position: absolute;
  animation: arrows 2s infinite linear;
  width: 20ex;
  left: -7ex;
}
@keyframes arrows {
  0%{left: -7ex;}
  50%{left: -4ex;}
  100%{left: -1ex;}
}

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

Also, you need not specify animation-iteration-count again when you have already specified it in the shorthand rule animation.