使用window.requestAnimationFrame实现动态移动

滚动容器结构

<div class="brand-box" style="max-width: 1600px; margin: 0 auto; overflow: hidden;">
    <ul class="partner-list" id="elementNeedAnimation">
        <li><a><img src="../resource/images/home/partner_logo1.png" alt=""></a><span>吉利汽车</span></li>
        <li><a><img src="../resource/images/home/partner_logo2.png" alt=""></a><span>上海大众</span></li>
        <li><a><img src="../resource/images/home/partner_logo3.png" alt=""></a><span>长安马自达</span></li>
        <li><a><img src="../resource/images/home/partner_logo4.png" alt=""></a><span>江铃福特</span></li>
        <li><a><img src="../resource/images/home/partner_logo5.png" alt=""></a><span>沃尔沃</span></li>
        <li><a><img src="../resource/images/home/partner_logo6.png" alt=""></a><span>玛莎拉蒂</span></li>
        <li><a><img src="../resource/images/home/partner_logo7.png" alt=""></a><span>宝马</span></li>
        <li><a><img src="../resource/images/home/partner_logo8.png" alt=""></a><span>起亚</span></li>
        <li><a><img src="../resource/images/home/partner_logo9.png" alt=""></a><span>江淮汽车</span></li>
        <li><a><img src="../resource/images/home/partner_logo10.png" alt=""></a><span>北京现代</span></li>
        <li><a><img src="../resource/images/home/partner_logo11.png" alt=""></a><span>上汽大通</span></li>
    </ul>
</div>

改变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);