css3实现无限横向滚动且动画执行完毕没有跳动的视差感

前两天在模仿京东商城的无限滚动时，使用css3的transform写的时候，动画执行完毕了会突变的初始位置，使用了多种方法都没有解决，那应该怎么解决呢？

解决方法

其实原理很简单，就是复制你要播放的内容，然后放在它的后面，然后给装你要播放的父盒子添加动画，让他走到一个子盒子的宽度。然后再无限播放。这样就不会产生突变的视觉了。因为你已经走了一个子盒子的距离了，你复制的内容显示的部分相当于你初始化的样子，所以不会产生突变的感觉。

html部分

            <div class="auto">
                <div class="autos">
                    <a href="javascript:;">
                        <img src="upload/40.webp" alt="">
                        <p>卡西欧 经典系列 男士手表</p>
                    </a>
                    <a href="javascript:;">
                        <p>耐克 缓震 跑步鞋</p>
                        <img src="upload/41.webp" alt="">

                    </a>
                    <a href="javascript:;">
                        <img src="upload/42.webp" alt="">
                        <p>李宁 吸湿PU 篮球</p>
                    </a>
                    <a href="javascript:;">
                        <p>万代 拼插 模型</p>
                        <img src="upload/43.webp" alt="">

                    </a>
                    <a href="javascript:;">
                        <img src="upload/44.webp" alt="">
                        <p>鱼官儿 美丽易饲养 红樱桃灯</p>
                    </a>
                    <a href="javascript:;">
                        <p>小牛 G0 小巧紧凑 电动车</p>
                        <img src="upload/45.webp" alt="">

                    </a>
                    <a href="javascript:;">
                        <img src="upload/46.webp" alt="">
                        <p>DURGOD 三模 机械键盘</p>
                    </a>
                    <a href="javascript:;">
                        <p>小米 至尊纪念版 5G手机</p>
                        <img src="upload/47.webp" alt="">

                    </a>
                    <a href="javascript:;">
                        <img src="upload/48.webp" alt="">
                        <p>安德玛 刺绣logo 运动帽</p>
                    </a>
                    <a href="javascript:;">
                        <p>海飞丝 干性去屑 洗护套装</p>
                        <img src="upload/49.webp" alt="">

                    </a>

                </div>
                <!--复制的内容-->
                <div class="autos">
                    <a href="javascript:;">
                        <img src="upload/40.webp" alt="">
                        <p>卡西欧 经典系列 男士手表</p>
                    </a>
                    <a href="javascript:;">
                        <p>耐克 缓震 跑步鞋</p>
                        <img src="upload/41.webp" alt="">

                    </a>
                    <a href="javascript:;">
                        <img src="upload/42.webp" alt="">
                        <p>李宁 吸湿PU 篮球</p>
                    </a>
                    <a href="javascript:;">
                        <p>万代 拼插 模型</p>
                        <img src="upload/43.webp" alt="">

                    </a>
                    <a href="javascript:;">
                        <img src="upload/44.webp" alt="">
                        <p>鱼官儿 美丽易饲养 红樱桃灯</p>
                    </a>
                    <a href="javascript:;">
                        <p>小牛 G0 小巧紧凑 电动车</p>
                        <img src="upload/45.webp" alt="">

                    </a>
                    <a href="javascript:;">
                        <img src="upload/46.webp" alt="">
                        <p>DURGOD 三模 机械键盘</p>
                    </a>
                    <a href="javascript:;">
                        <p>小米 至尊纪念版 5G手机</p>
                        <img src="upload/47.webp" alt="">

                    </a>
                    <a href="javascript:;">
                        <img src="upload/48.webp" alt="">
                        <p>安德玛 刺绣logo 运动帽</p>
                    </a>
                    <a href="javascript:;">
                        <p>海飞丝 干性去屑 洗护套装</p>
                        <img src="upload/49.webp" alt="">

                    </a>

                </div>

            </div>
        </div>

css部分

/*最大的盒子*/
.find-right {
    position: relative;
    float: left;
    width: 1000px;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
}
/*装内容的父盒子*/
.auto {
    padding: 30px 0;
    width: 3600px;
    position: absolute;
    top: 0;
    left: 0;
    animation: ani 30s linear infinite;
}

.auto .autos {
    width: 1800px;
    float: left;
}

.auto a {
    float: left;
    width: 150px;
    height: 200px;
    margin-right: 30px;
}

.auto a p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 20px 5px;
    color: #333;
    font-size: 14px;
    text-align: center;
}

.auto a img {
    width: 100%;
}


/* 定义动画 */

@keyframes ani {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-1800px, 0, 0);
    }
}

如果动画执行着有着比较严重的卡顿，可以把动画时间增长一点 暂时还未找到性能优化的方案