html - 使用 css 动画在循环中无缝移动箭头

Question

我正在尝试在一个 div 中实现一个箭头的无缝循环。

我正在使用两个 SVG 箭头，我想要实现的是，当第一个箭头的顶部部分隐藏时，应该显示第二个箭头的相同部分，所以看起来只使用了一个箭头并且它在移动在循环中(当第一个箭头到达 div 的顶部并且它的 50% 被隐藏时，第二个箭头的 50% 应该显示在底部)。

.arrows-wrapper {
  width: 124px;
  height: 83px;
  overflow: hidden;
  position: relative;
  background-color: gray;
}

.arrows-wrapper svg {
  position: absolute;
}

.arrows {
  animation: slide 4s linear infinite;
}

.arrow2 {
  animation-delay: 2s;
}

@keyframes slide {
  from {
    transform: translate(0, -25px);
  }
  to {
    transform: translate(0, -125px);
  }
}

<div class="arrows-wrapper">
  <svg width="124" height="197" viewBox="0 0 124 197">
    <g class="arrows arrow1">
      <polyline stroke="yellow" stroke-width="2" fill="none" points="50,110 61,104 72,110"></polyline>
      <polyline stroke="yellow" stroke-width="4" fill="none" points="50,116 61,110 72,116"></polyline>
      <polyline stroke="yellow" stroke-width="2" fill="none" points="50,122 61,116 72,122"></polyline>
    </g>
  </svg>
  <svg width="124" height="197" viewBox="0 0 124 197">
    <g class="arrows arrow2">
      <polyline stroke="yellow" stroke-width="2" fill="none" points="50,110 61,104 72,110"></polyline>
      <polyline stroke="yellow" stroke-width="4" fill="none" points="50,116 61,110 72,116"></polyline>
      <polyline stroke="yellow" stroke-width="2" fill="none" points="50,122 61,116 72,122"></polyline>
    </g>
  </svg>
</div>

参见 the demo到目前为止我所得到的(两个箭头一次可见，但只有一个箭头或其中的一部分应该同时可见)。

我需要的结果:

问题是是否有可能实现。

Answer 1

这应该可以做到:只需调整您的 CSS 动画中的翻译。

.arrows-wrapper {
  width: 124px;
  height: 83px;
  overflow: hidden;
  position: relative;
  background-color: gray;
}

.arrows-wrapper svg {
  position: absolute;
}

.arrows {
  animation: slide 4s linear infinite;
}

.arrow2 {
  animation-delay: 2s;
}

@keyframes slide {
  from {
    transform: translate(0, -25px);
  }
  to {
    transform: translate(0, -200px);
  }
}

<div class="arrows-wrapper">
  <svg width="124" height="197" viewBox="0 0 124 197">
    <g class="arrows arrow1">
      <polyline stroke="yellow" stroke-width="2" fill="none" points="50,110 61,104 72,110"></polyline>
      <polyline stroke="yellow" stroke-width="4" fill="none" points="50,116 61,110 72,116"></polyline>
      <polyline stroke="yellow" stroke-width="2" fill="none" points="50,122 61,116 72,122"></polyline>
    </g>
  </svg>
  <svg width="124" height="197" viewBox="0 0 124 197">
    <g class="arrows arrow2">
      <polyline stroke="yellow" stroke-width="2" fill="none" points="50,110 61,104 72,110"></polyline>
      <polyline stroke="yellow" stroke-width="4" fill="none" points="50,116 61,110 72,116"></polyline>
      <polyline stroke="yellow" stroke-width="2" fill="none" points="50,122 61,116 72,122"></polyline>
    </g>
  </svg>
</div>