无限滑动容器中文本的动画答案

【问题标题】：Slide animation for text in container infinitely无限滑动容器中文本的动画
【发布时间】：2022-01-18 10:09:36
【问题描述】：

我正在无限地为容器中的文本制作幻灯片动画。

但是，我发现它运行不顺利。当文本到达末尾时，似乎是重新开始而不是循环文本。

我想要的是文字不断向右滑动。

如何解决？

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div class="slide-right">
        <h2>
          <span>A</span>
          <span>A</span>
          <span>A</span>
          <span>A</span>
          <span>A</span>
          <span>A</span>
        </h2>
      </div>
    </div>
  );
}

样式.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.slide-right {
  border: 1px solid grey;
  width: 150px;
  overflow: hidden;
}

.slide-right h2 {
  animation: infinite slide-right 2s linear;
  transform: translateX(-100%);
  text-align: right;
}

.slide-right h2 span {
  margin-right: 10px;
}

@keyframes slide-right {
  to {
    transform: translateX(0);
  }
}

代码沙盒：
https://codesandbox.io/s/hidden-bird-qy3jy?file=/src/styles.css

【问题讨论】：

为了让它看起来连续，你可以有两个完整的内容副本和 -50% 到 0% 之间的 transformX。这样，一半会“覆盖”另一半，因此看起来是连续的。
@A Haworth 你能解释更多吗？

标签： javascript css reactjs

【解决方案1】：

为了获得连续流，这个 sn-p 有两个 span 副本。

最初 h2 被翻译为 -50%，因此仅显示下半部分的开头。

动画将其向右移动，以显示前半部分的开头结束。

然后在重复时，下半场的开头取代了上半场的开头，所以看起来都是连续的。

.App {
  font-family: sans-serif;
  text-align: center;
}

.slide-right {
  border: 1px solid grey;
  width: 150px;
  overflow: hidden;
}

.slide-right h2 {
  animation: infinite slide-right 2s linear;
  transform: translateX(-50%);
  display: inline-block;
}

.slide-right h2 span {
  margin-right: 10px;
}

@keyframes slide-right {
  to {
    transform: translateX(0);
  }
}

&lt;div class="App"&gt;&lt;div class="slide-right"&gt;&lt;h2&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;A&lt;/span&gt;&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;

注意：为避免文本换行出现问题，跨度是连续布局的（如问题中的代码框）。

【讨论】：

【解决方案2】：

@keyframes slide-right {
  to {
    transform: translateX(100%);
  }
}

用这个代替 translateX(0)

将A的数量加倍以使效果连续。

【讨论】：

是否可以让A 填满所有空间并循环播放？
是的，A的数量翻倍
试过了。但不工作
制作两张幻灯片。一个跟随另一个，当一张幻灯片完全向右移动时，重置其位置
youtu.be/Mg7ibYWhjPI 这个教程很有帮助。跳到 11 分钟

【解决方案3】：

将“向右滑动”关键帧从 transform: translateX(0); 更改为 transform: translateX(100%);

【讨论】：

是否可以让A填满所有空间并循环？