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。

谢谢。

- xhallix

---

类似于 <marquee>->->-></marquee> 的东西？ - Baldráni

@Baldráni 这看起来很有前途。 - xhallix

<marquee>已被弃用和废弃，不应再使用。- https://developer.mozilla.org/en/docs/Web/HTML/Element/marquee - Paulie_D

@xhallix，请检查我的答案。 - Dhaarani

@Paulie_D 哦，我不知道，那么唯一的选择就是JavaScript了。 - Baldráni

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>

- Dhaarani

---

@Baldráni 现在请检查它。 - Dhaarani

抱歉，这不是我想要的，因为你可以看到它会跳回到开头，这使得它看起来不是无限的。 - xhallix

@xhallix 现在检查一下。 - Dhaarani

@xhallix 谢谢。 - Dhaarani

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>

此外，当您已经在简写规则animation中指定了animation-iteration-count时，无需再次指定它。

- Mohit Bhardwaj

Answer 3

标签<marquee>是否足够，或者您需要一个没有中断的完整循环效果？如果是这种情况，我认为您无法在没有JavaScript的情况下实现它。

如果<marquee>足够，请看以下示例。

<marquee BEHAVIOR="slide" DIRECTION="right" LOOP="2">->->-></marquee>

- Baldráni