无缝无限滚动文本选取框CSS/宽度问题

Question

我正在尝试创建 HTML/CSS 滚动文本功能，但是我在无缝显示方面遇到了一些问题。

滚动文本从右侧开始并正确滚动，但当到达左侧时，由于

width: 100%;

上的

#marqueeText

，它会消失 6-7 秒，因此它会继续从左手滚动边长约1020px（容器的宽度）。

如果我删除

width: 100%;

，则

#marqueeText

仅约为 150 像素，它会从屏幕右侧滚动约 300 像素（-100%），然后再次循环。

const timePerPixel = 5;
const containerWidth = 1120;
const text = document.getElementById('marqueeText');
const textWidth = text.offsetWidth;
const distance = textWidth + containerWidth;
const duration = timePerPixel * distance;
text.style.animationDuration = `${duration}ms`;

@keyframes marquee-animation {
  from {
    /* Start right out of view */
    transform: translate3d(100%, 0, 0);
  }
  to {
    /* Animate to the left of the container width */
    transform: translate3d(-100%, 0, 0);
  }
}

.topmarquee {
  width: 100%;
  border: 1px solid #000;
}

.topmarquee .marquee {
  width: calc(100% - 200px);
  position: relative;
  overflow: hidden;
  height: 31px;
}

.topmarquee .marquee #marqueeText {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  white-space: nowrap;
  transform: translate3d(100%, 0, 0);
  animation-name: marquee-animation;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  line-height: 31px;
  width: 100%;
}

<div class="d-none d-lg-flex row topmarquee mt-4">
  <div class="marquee">
    <p id="marqueeText" class="marqueeText mb-0">
      This is a test website
    </p>
  </div>
</div>

（我单独完成动画属性的原因是我有一些JS根据文本的长度添加动画持续时间，以便速度始终保持不变，基于这篇文章：选框文本效果。相同的滚动无论文本长度如何，速度

理想情况下，我希望它在全部从左侧消失后立即重新出现在右侧，以显得无缝。

Answer 1

为了使动画看起来连续，系统需要了解实际文本的宽度。目前，最里面的元素具有外部元素的宽度。

此代码片段将其宽度设置为 fit-content。

翻译现在将不起作用，因为它们取决于动画元素的宽度与外部（100％）相同，因此我们将元素放置在左侧 100％ 处，使其脱离视图，然后在动画结束时，我们将其左移 0 并将其平移 -100%（这是其宽度的 100%，而不是其父级的宽度）。

const timePerPixel = 5;
const containerWidth = 1120;
const text = document.getElementById('marqueeText');
const textWidth = text.offsetWidth;
const distance = textWidth + containerWidth;
const duration = timePerPixel * distance;
text.style.animationDuration = `${duration}ms`;

@keyframes marquee-animation {
  from {
    /* Start right out of view */
  }
  to {
    /* Animate to the left of the container width */
    left: 0;
    transform: translateX(-100%);
  }
}

.topmarquee {
  width: 100%;
  border: 1px solid #000;
}

.topmarquee .marquee {
  width: calc(100% - 200px);
  position: relative;
  overflow: hidden;
  height: 31px;
}

.topmarquee .marquee #marqueeText {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  white-space: nowrap;
  left: 100%;
  transform: translateX(0);
  animation-name: marquee-animation;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  line-height: 31px;
  width: 100%;
  width: fit-content;
}

<div class="d-none d-lg-flex row topmarquee mt-4">
  <div class="marquee">
    <p id="marqueeText" class="marqueeText mb-0">
      This is a test website
    </p>
  </div>
</div>