Js not be achieved.
html:
< Div class = "Box" > < the p- class = "Animate" > text scrolling text scrolling content content content text scrolling text scrolling content </ the p- > </ div >
css:
.box { width: 100%; margin: 0 auto; border: 1px solid #ff6700; overflow: hidden; } .animate { padding-left: 20px; font-size: 12px; color: #000; display: inline-block; white-space: nowrap; animation: 5s wordsLoop linear infinite normal; } @keyframes wordsLoop { 0% { transform: translateX(100%); -webkit-transform: translateX(100%); } 100% { transform: translateX(-100%); -webkit-transform: translateX(-100%); } } @-webkit-keyframes wordsLoop { 0% { transform: translateX(100%); -webkit-transform: translateX(100%); } 100% { transform: translateX(-100%); -webkit-transform: translateX(-100%); } }