Pure CSS text scrolls indefinitely

<div class="box-list"> <p>1 <div class="box-list"> <p>2 </p> <p>3 Test text Test Text Test Text Test Text test text </p> < P >4 Test text test Text Test Text Test text test text </p> <p>5 Test text test text test text test text </p> <p>6 Test text test text test text test text </p> <p> < div> </div> // 2, CSS <style>. Box {height:100px; overflow:hidden; width:100% } .box-list{ line-height:100px; -webkit-animation:16s animationRun linear infinite normal; animation:20 animationRun linear infinite normal; position: Relative} @keyframs animationRun{0%{-webkit-transform:translate3d(0,0,0)} 50% { -webkit-transform:translate3d(0,-800px,0) transform:translate3d(0,-800px,0) } } @-webkit-@keyframs animation{ 0%{ -webkit-transform:translate3d(0,0,0) transform:translate3d(0,0,0)} 100%{-webkit-transform:translate3d(0,-800px,0) transform:translate3d(0,-800px,0) } } </style>Copy the code