动画 水平移动

1、 准备一个容器

 <div class="ad-box">
    <div class="ad active"></div>
 </div>

2、 用样式控制

      .ad-box{    大盒子
		  width: 1400px;
		  margin: 0 auto;
		  padding-bottom: 80px;
		}
		.ad{
			  width: 7550px;
			  height: 190px;
			  transform: translateX(-1700px); // 使图片先平移宽度的一半  使图片位于中间位置
			  -webkit-transform: translateX(-1700px);
			  -ms-transform: translateX(-1700px);
			  &::before, &::after{
			    display: block;
			    content: '';
			    float: left;   
			    overflow: hidden;
			    width: 3775px;
			    height: 190px;          图片
			    background-image: url   (https://asset.ibanquan.com/manage/img/main_v5/about/about-logo.png?v=db983ebe912b91a77632d525a86b154f);
			  }
    // 用类名控制 动画
			  &.active::before{
			     animation: aboutBeforeMove 240s linear infinite;  // 向左移 整个图片的宽度 
			  }
			  &.active::after{ // 向左移移动 图片x 2 的宽度
			    animation: aboutAfterMove 240s linear infinite;
			  }
			}
			
			
      动画实现：
      
			@keyframes aboutBeforeMove{
				  0%{
				    -webkit-transform:translateZ(0);
				    transform:translateZ(0)
				  }
				  50%{
				    -webkit-transform:translate3d(-3775px,0,0); // 向x轴反方向平移 整个图片的宽度
				    transform:translate3d(-3775px,0,0)
				  }
				  50.001%{
				    -webkit-transform:translate3d(3775px,0,0);
				    transform:translate3d(3775px,0,0)  // 向x轴正方向平移 整个图片的宽度
				  }
				  to{
				    -webkit-transform:translateZ(0);
				    transform:translateZ(0)
				  }
			}
				
			@keyframes aboutAfterMove{
				  0%{
				    -webkit-transform:translateZ(0);
				    transform:translateZ(0)
				  }
				  to{
				    -webkit-transform:translate3d(-7550px,0,0); // 向x轴反方向平移 整个图片x2 的宽度
				    transform:translate3d(-7550px,0,0)
				  }
			}