我如何在屏幕右侧移动文本并在屏幕左侧移回文本

Question

我想做一个游戏。如何使h1标签在reactjs中从左向右移动？

import React from 'react';

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

export default Hello;

Answer 1

我创建了以下解决方案：codepen：

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

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

css文件：

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%;
  }
}