El concepto es simple, cuando el texto es demasiado largo para el contenedor, se anima (desplaza) infinitamente de izquierda a derecha y repite este proceso una vez que llega al final.
¿Cómo debo hacer para hacer esto?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div class="auto-scroll"> <p> This text should scroll. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi commodi magni quo officia error ab veniam aspernatur. Quos ducimus, hic, maxime dicta optio quidem nostrum sint commodi velit, ut distinctio. And return to beginning. </p> </div> <style> .auto-scroll { background: black; padding: 18px; } .auto-scroll p { font-family: monospace; font-size: 18px; color: white; margin: 0; white-space: nowrap; overflow: auto; } .auto-scroll ::-webkit-scrollbar { height: 10px; /* will be 0px */ } .auto-scroll ::-webkit-scrollbar-track { background: #000; } .auto-scroll ::-webkit-scrollbar-thumb { background: #fff; } </style> </body> </html>No necesita javascript, puede hacerlo en css como este siguiente código
div{ width: 100%; background-color: black; white-space: nowrap; overflow: hidden; box-sizing: border-box; } p{ display: inline-block; color: #FFF; padding-left: 100%; animation: move 25s linear infinite; } @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } <div> <p>This text should scroll. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi commodi magni quo officia error ab veniam aspernatur. Quos ducimus, hic, maxime dicta optio quidem nostrum sint commodi velit, ut distinctio. And return to beginning.</p> </div>