纯 CSS 连续水平跨度滚动，不间断从屏幕开始

Question

我正在尝试创建一个纯粹的 CSS 滚动选取框动画，该动画从动画中途开始，内容已经显示在屏幕上，然后无限滚动而不间断。

我找到了几个例子，但我遇到了麻烦 1. 集成两种解决方案（在屏幕上开始 + 无间隙），2. 适应滚动图像而不是文本的使用。

这是我的参考：

我发现很难理解这里实际发生的事情，这就是我无法修复它的原因。

我正在使用动画延迟让第一个选取框开始出现在屏幕上，然后似乎有一个很长的延迟 and/or 在第二个选取框出现之前发生了一些重叠。我想要第二个选取框在第一个选取框之后无缝开始，然后第一个选取框循环返回以在第二个选取框之后无缝重复，依此类推。

我将图像用作背景图像，这是使用已弃用的 marquee 元素的残余图像。我对这里的替代解决方案持开放态度。我已将 2 张图像拼接在一起，试图使其更长，但可以在必要时重新编辑图像。

感谢您的建议，提前致谢。

到目前为止，这是我的代码：

.container {
    white-space: nowrap;
  background-color: blue;
  width: 100%;
}

.marquee {
    display: inline-block;
    background-image: url(https://sligoil.com/wp-content/uploads/2022/02/icons-long-01.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding-top: 6.798%;
    width: 100%;
    color: transparent;
    padding-left: 100%;
    /*-moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);*/
  -moz-animation: scroll-left 20s linear infinite;
  -webkit-animation: scroll-left 20s linear infinite;
  animation: scroll-left 20s linear infinite;
}

#marq-1 {
      animation-delay: -10s;
}
#marq-2 {
      animation-delay: -20s;
}

@-moz-keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
  }
}
        
@-webkit-keyframes scroll-left {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}
        
@keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

<div class="container">
    <span id="marq-1" class="marquee">.</span>
  <span id="marq-2" class="marquee">.</span>
</div>

Answer 1

当您使用背景图片时，有一种更简单的方法，即直接为背景图片制作动画并使用背景重复。

PS：不确定“动画中途开始”是什么意思

.bg-marquee {
    background-color: blue;
    height: 50px;
    width: 100%;
    background-image: url(https://sligoil.com/wp-content/uploads/2022/02/icons-long-01.svg);
    background-repeat: repeat-x;
    background-size: 1000px auto;
    animation: marquee 5s infinite linear;
}

@keyframes marquee {
    0% { background-position: 0; }
    100% { background-position: -1000px; }
}

<div class="bg-marquee"></div>

纯 CSS 连续水平跨度滚动，不间断从屏幕开始

Pure CSS Continuous Horizontal Span Scroll Without Break Starting On-screen

css

css-animations

infinite-scroll

marquee