css无缝滚动

效果

 <div class="box1980_outer cooperative_outer">
    <div class="box1980 cooperative">
        <h2 class="subhead">合作伙伴</h2>
        <div class="cooperative_inside_ball">
            <div class="cooperative_ul_outer cl cooperative_scroll" ref="cooperative_scroll">
                <ul v-for="(i,index) in 2" :class="'cooperative_inside_ul'+i" :key="index">
                    <li class="partner_ball" @mouseover="partner_ball_mouseover($event)" @mouseout="partner_ball_mouseout($event)" v-for="(item,index) in partner_ball_data" :key="index" :style="'width:'+item.size+'px;height:'+item.size+'px;left:'+item.left+'px;top:'+item.top+'px;'"> <img class="img100" :src="item.img" alt="" /></li>
                </ul>
            </div>
        </div>
    </div>
</div>


partner_ball_data:[
    {size:120,left:15,top:171,img:'https://images.36w.cn/officialWebImagse/icon_meituan1@3x.png'},
    {size:120,left:215,top:126,img:'https://images.36w.cn/officialWebImagse/icon_pinduoduo2@3x.png'},
    {size:95,left:486,top:142,img:'https://images.36w.cn/officialWebImagse/icon_alibaba5@3x.png'},

    {size:67,left:751,top:136,img:'https://images.36w.cn/officialWebImagse/icon_ticai8@3x.png'},
    {size:90,left:971,top:119,img:'https://images.36w.cn/officialWebImagse/icon_mengniu11@3x.png'},
    {size:119,left:1231,top:136,img:'https://images.36w.cn/officialWebImagse/icon_tesila14@3x.png'},

    {size:97,left:1471,top:108,img:'https://images.36w.cn/officialWebImagse/icon_boe17@3x.png'},
    {size:119,left:1747,top:134,img:'https://images.36w.cn/officialWebImagse/icon_zhongxinshudian20@3x.png'},
    {size:84,left:25,top:379,img:'https://images.36w.cn/officialWebImagse/icon_bank3@3x.png'},

    {size:99,left:190,top:322,img:'https://images.36w.cn/officialWebImagse/icon_xinhuabaoxian4@3x.png'},
    {size:89,left:385,top:245,img:'https://images.36w.cn/officialWebImagse/icon_baidu6@3x.png'},
    {size:115,left:623,top:274,img:'https://images.36w.cn/officialWebImagse/icon_haier9@3x.png'},

    {size:99,left:864,top:205,img:'https://images.36w.cn/officialWebImagse/icon_geli12@3x.png'},
    {size:123,left:1073,top:291,img:'https://images.36w.cn/officialWebImagse/icon_jingdong15@3x.png'},
    {size:90,left:1418,top:286,img:'https://images.36w.cn/officialWebImagse/icon_tantan18@3x.png'},

    {size:101,left:1592,top:220,img:'https://images.36w.cn/officialWebImagse/icon_changba21@3x.png'},

    {size:119,left:310,top:417,img:'https://images.36w.cn/officialWebImagse/icon_didi7@3x.png'},
    {size:88,left:483,top:395,img:'https://images.36w.cn/officialWebImagse/icon_kuaishou10@3x.png'},
    {size:98,left:753,top:439,img:'https://images.36w.cn/officialWebImagse/icon_shaoniandedao13@3x.png'},

    {size:96,left:914,top:369,img:'https://images.36w.cn/officialWebImagse/icon_yixin16@3x.png'},
    {size:119,left:1274,top:374,img:'https://images.36w.cn/officialWebImagse/icon_keep19@3x.png'},
    {size:123,left:1574,top:370,img:'https://images.36w.cn/officialWebImagse/icon_ximalaya22@3x.png'},

    {size:116,left:1736,top:353,img:'https://images.36w.cn/officialWebImagse/icon_haluochuxing23@3x.png'}, ]
    
    methods:{
        solutionMenuClick(a){
          this.solutionCount = a
        },
        partner_ball_mouseover(){
             this.$refs.cooperative_scroll.style.animationPlayState="paused" 
        },
        partner_ball_mouseout(){
            this.$refs.cooperative_scroll.style.animationPlayState="running" 
        }

    }
    
    
     .cooperative_outer{
        background: url("https://images.36w.cn/officialWebImagse/pic_partner01@3x.png");
        background-size: 100% 610px;
        background-repeat: no-repeat;
        background-position:bottom;
        .cooperative{
            height:767px;
            .cooperative_inside_ball{
                margin-top:17px;
                width: 1920px;
                padding-left:20px;
                height: 609px;
                overflow:hidden;
                .cooperative_ul_outer{
                    height:100%;
                    width: 3840px;
                    transform:translateX(-1920px);
                    animation: cooperative_scroll 18s linear infinite;
                }
                ul{
                    width: 1920px;
                    height:100%;
                    position:relative;
                    float:left;
                    li{
                        overflow:hidden;
                        position:absolute;
                        width: 120px;
                        height: 120px;
                        border-radius:50%;
                        box-shadow: 0px 2px 4px 0px 
                            #aeb9d5;
                    }
                    li:hover{
                        transform:scale(1.5,1.5);
                        transition:0.4s;
                    }
                }
            }
        }
    }

    @keyframes cooperative_scroll {
    //   from {
    //     transform: translateX(0);
    //   }
    0%   {transform: translateX(0);}
    //25%  {transform: translate(0,-50px);}
    // 50%  {transform: translateY(-1);}
    // 75%  {transform: translateY(0);}
    //  100% {transform: translate(0,50px);} 
      	
    }