纯css文字无限滚动

// 1、html
<div class="box">
   <div class="box-list">
       <p>1测试文字测试文字测试文字测试文字</p>
       <p>2测试文字测试文字测试文字测试文字</p>
       <p>3测试文字测试文字测试文字测试文字</p>
       <p>4测试文字测试文字测试文字测试文字</p>
       <p>5测试文字测试文字测试文字测试文字</p>
       <p>6测试文字测试文字测试文字测试文字</p>
       <p>7测试文字测试文字测试文字测试文字</p>
       <p>8测试文字测试文字测试文字测试文字</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)
         transform:translate3d(0,0,0)
      }
      100%{
         -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>