html - Css 动画无限动画线

Question

不确定这是否可以用css来完成，否则我会寻找一种方法用js来完成。我想创建一个不断重复的无限流畅的动画。

这条箭头虚线应该是不断流动的，没有尽头。

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

我在这里对 css 的了解并不多。

.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>

我的问题不是让动画更流畅，而是让箭头重复它们而不跳包到 0px 的起点

谢谢

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>