CSS3实现横向滚动播放

CSS3实现无限横向滚动,纵向滚动同理，控制属性left换成top既可以

<div class="wrap2">
        <div class="p2">  
            <p class="p11">2020年消防工程报名条件已经公布,各个地区的考生可以根据自身条件查看是否符合标准  </p>
            <p class="p22">2020年消防工程报名条件已经公布,各个地区的考生可以根据自身条件查看是否符合标准  </p>
        </div>
</div>

注意这里的-webkit-前缀必须加上，兼容不同的浏览器

.wrap2 .p2 {
    line-height: 30px;
    overflow: hidden;
    color: rgb(102 102 102);
    font-size: 12px;

}
.wrap2 .p2  p{
        position: absolute;
        height: 30px;
        overflow: hidden;
}
.wrap2 .p2  .p22{
    animation: scroll2  20s linear infinite  ;
    -webkit-animation: scroll2  20s linear infinite  ;
}
.wrap2 .p2  .p11{
   animation: scroll 20s linear infinite  ;
   -webkit-animation:scroll 20s linear infinite  ;
}
.wrap2{
       height: 47px;
       position: relative;
       overflow: hidden;
}
@keyframes scroll2
{
    0% { left: 150%; }
    100% { left: 0; }

}
@keyframes scroll
{
  
    0% { left: 0; }
    100% { left: -150%;}

}
@-webkit-keyframes scroll2 
{
    0% { left: 150%; }
    100% { left: 0; }
}
@-webkit-keyframes scroll 
{
    0% { left: 0; }
    100% { left: -150%;}
}