javascript - 容器中文本的无限滑动动画

Question

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

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

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

如何解决？

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

Answer 1

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