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>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

此外，如果您已在速记规则animation-iteration-count中指定animation，则无需再次指定SELECT * FROM dbo.TestTable tt WHERE EXIST ( SELECT 1 FROM (VALUES ('x'), ('y'), ('z')) AS b(Name) WHERE b.Name IN (tt.data1, tt.data2, tt.data3) )。

Answer 3

balise <marquee>是否足够，或者你是否在没有休息的情况下寻找整个循环效果？如果是这种情况，我认为没有javascript就可以做到。

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

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

Css动画无限动画线

3 个答案: