javascript - 选取框文本动画重置

Question

我正在 Squarespace 中建立一个网站，并实现了无限文本滚动。问题是在动画周期结束时它会重置。

参考网站：premiercitizenship.com

这是我的程序员使用的代码：

[data-section-id="60fa77839ea7dd121dbd947d"] {
  overflow: hidden;
}

body {
  overflow-x: hidden;
}

.vertscroll {
  margin: 0 auto;
  white-space: nowrap;
  position: absolute;
  span {
    display: inline-block;
    animation: vertscroll 40s linear infinite;
    &:nth-child(2) {
      animation-delay: 5s;
    }
  }
}

.marquee {
  position: relative;
  z-index: 1;
  width: 100000px;
  transform: translateX(0px);
  animation: 40s linear 0s infinite normal none running vertscroll;
  a {
    font-size: 24px;
    color: #626262;
    transition: all .2s;
    &:hover {
      color: #cfc194;
    }
  }
  .js-marquee-2 {
    margin-right: 0px;
    float: left;
  }
}

@keyframes vertscroll {
  100% {
    transform: translateX(-1400px);
  }
}

<div class="marquee">
  <div class="text js-marquee-2">
    <a href="/antiguaandbarbudacitizenship">Antiqua and Barbuda</a>&emsp;&emsp;<a href="/dominicacitizenship">Dominica</a>&emsp;&emsp;<a href="/stluciacitizenship">St. Lucia</a>&emsp;&emsp;<a href="/stkittsandneviscitizenship">St. Kitts and Nevis</a>&emsp;&emsp;
    <a
      href="/cypruscitizenship">Grenada</a>&emsp;&emsp;<a href="/cypruscitizenship">Cyprus</a>&emsp;&emsp;<a href="/maltacitizenship">Malta</a>&emsp;&emsp;<a href="/turkeycitizenship">Turkey</a>&emsp;&emsp;<a href="/vanuatucitizenship">Vanuatu</a>&emsp;&emsp;<a href="/montenegrocitizenship">Montenegro</a>&emsp;&emsp;
      <a
        href="/greececitizenship">Greece</a>&emsp;&emsp;<a href="/portugalcitizenship">Portugal</a>&emsp;&emsp;
  </div>
  <div class="js-marquee-2"><a href="/antiguaandbarbudacitizenship">Antiqua and Barbuda</a>&emsp;&emsp;<a href="/dominicacitizenship">Dominica</a>&emsp;&emsp;<a href="/stluciacitizenship">St. Lucia</a>&emsp;&emsp;<a href="/stkittsandneviscitizenship">St. Kitts and Nevis</a>&emsp;&emsp;
    <a
      href="/cypruscitizenship">Grenada</a>&emsp;&emsp;<a href="/cypruscitizenship">Cyprus</a>&emsp;&emsp;<a href="/maltacitizenship">Malta</a>&emsp;&emsp;<a href="/turkeycitizenship">Turkey</a>&emsp;&emsp;<a href="/vanuatucitizenship">Vanuatu</a>&emsp;&emsp;<a href="/montenegrocitizenship">Montenegro</a>&emsp;&emsp;
      <a
        href="/greececitizenship">Greece</a>&emsp;&emsp;<a href="/portugalcitizenship">Portugal</a>&emsp;&emsp;
  </div>
</div>

标签： javascriptjquerycsssquarespace