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

应答器 <marquee> 是否足够，或者您是否正在寻找不间断的完整循环效果？如果是这样的话，我认为没有 javascript.

是做不到的

如果选框足够这里是一个例子。

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

Answer 2

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

不太好，但可能对你有用：

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

另外，在shorthand规则animation中已经指定了animation-iteration-count就不需要再指定animation-iteration-count了animation.

Css 动画无限动画线

Css animate infinite animated line

html

css

animation

keyframe