Css - slide animation for text in container infinitely-CodePudding

I am working on slide animation for text in container infinitely.

However, I found it not working smoothly. When the text reaches the end, it seems like restarting instead of looping the text.

What I want is the text keep sliding to the right continuously.

How to solve it?

App.js

import "./styles.css";

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

Styles.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);
  }
}

Codesandbox:
https://codesandbox.io/s/hidden-bird-qy3jy?file=/src/styles.css

CodePudding user response：

Change your "slide-right" keyframes from transform: translateX(0); to transform: translateX(100%);

CodePudding user response：

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

Use this instead of translateX(0)

Double the number of A to make the effect continuous.