使用window.requestAnimationFrame实现动态移动

滚动容器结构

    

        
吉利汽车
        
上海大众
        
长安马自达
        
江铃福特
        
沃尔沃
        
玛莎拉蒂
        
宝马
        
起亚
        
江淮汽车
        
北京现代
        
上汽大通
    

改变ul元素的transform属性

var number = 1;
var start = null;
var cellsRow = document.getElementById("elementNeedAnimation");

function stepMover(timestamp){
    timestamp = parseInt(timestamp);
    if (!start) start = timestamp;
    var progress = timestamp - start;
    if(number == (lx-(-1))){
        number = 1;
    }
    cellsRow.style.transform = "translateX("+(-Math.min((progress / 10) -(-(100*(number-1))), 100*number))+"px";
    if (progress < 2000) {
        window.requestAnimationFrame(stepMover);
    }else{
        var x = setTimeout(function(){
            number++;
            start = timestamp - (-1000);
            window.requestAnimationFrame(stepMover);
            clearTimeout(x);
        },1000);
    }
}
window.requestAnimationFrame(stepMover);