SOURCE

var container = document.getElementById("container");
var item = document.getElementsByClassName("item");
container.style.left = '0vw';
// console.log(container.offsetWidth)
item.forEach(function(value,index){
    value.style.setProperty('margin', '30px');
})

function mymove(){
    container.style.left = parseInt(container.style.left)-10+'px'
}

var itemArr = [...document.querySelectorAll('#container span')];
console.log(itemArr)
itemArr.map(el=>{
    el.style.animationDuration = 2+Math.random()*10+'s'
})

<div id="container" class="container">
    <span class="item">1XX</span>
    <span class="item">2XX</span>
    <span class="item">3XX</span>
    <span class="item">4XX</span>
    <span class="item">林XX</span>
    <span class="item">林XX</span>
    <span class="item">林XX</span>
    <span class="item">林XX</span>
    <span class="item">林XX</span>
    <span class="item">林XX</span>
    <span class="item">陈XX</span>
</div>

.container{
    position: fixed;
    left:100vw;
    top:0;
    animation: scrollItem 5s infinite linear;
}
span{
    /* position: fixed; 
            left: calc(0+-100px);
            top: calc(0+-100px);  */
            /* width:100px;
            height:100px; */
            /* background:red; */
    /* animation: scrollItem 5s infinite linear; */
}


@keyframes scrollItem {
            from{
                transform: translateX(calc(100vw));
            }
            to{
                transform: translateX(calc(0 + -100px));
            }
        }