How can i move a text right of the screen and back to left of screen

Question

I want to make a game. How can I make a h1 tag move left to right in reactjs ?

import React from 'react';

const Hello = (props) => (<React.StrictMode><h1 className = "App">Hello {props.name}</h1></React.StrictMode>);

export default Hello;

Answer 1

I created this solution: codepen:

const App = () => {
    return (
      <div className="wrapper">
        <p className="marquee">Hello, world!</p>
      </div>
    );
}

  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

css file:

body{ 
    overflow: hidden;
}
p{
    position: absolute;
    white-space: nowrap;
    animation: floatText 5s infinite alternate ease-in-out;
}

@-webkit-keyframes floatText{
  from {
    left: 00%;
  }

  to {
    /* left: auto; */
    left: 100%;
  }
}