Css动画无限动画线

Posted 2023-03-06

【中文标题】Css动画无限动画线

【英文标题】：Css animate infinite animated line

【发布时间】：2017-02-21 01:44:13

【问题描述】：

不确定这是否可以用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的起点

谢谢

【问题讨论】：

类似<marquee>->->-></marquee> ?

hm @Baldráni 这看起来很有希望

<marquee> 已被弃用且已过时且不应再使用。 - developer.mozilla.org/en/docs/Web/html/Element/marquee

@xhallix 检查我的答案。

@Paulie_D Ho 我不知道所以我想剩下的唯一选择就是javascript了。

【参考方案1】：

应答器<marquee> 是否足够，或者您是否正在寻找一个完整的循环效果而不中断？如果是这种情况，我认为没有 javascript 就无法做到。

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

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

【参考方案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>

【讨论】：

@Baldráni 现在检查一下。

对不起，这不是我要找的，因为你可以看到它跳回到起点，这使它看起来不是无限的

@xhallix 现在检查

@xhallix 谢谢。

【参考方案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>

另外，如果您已经在速记规则animation 中指定了animation-iteration-count，则无需再次指定它。