var ball1=document.querySelector('.ball1')
    var ball2=document.querySelector('.ball2')
    var ball3=document.querySelector('.ball3')

    var Promise = window.Promise
    function promiseAnimate(ball,distance){
        return new Promise(function(resolve,reject){
            function _animate() {
                setTimeout(function () {
                    var marginLeft = parseInt(ball.style.marginLeft, 10)
                    if (marginLeft == distance) {
                        resolve()
                    } else {
                        if (marginLeft < distance) {
                            marginLeft++
                        } else {
                            marginLeft--
                        }
                        ball.style.marginLeft = marginLeft + 'px'
                        _animate()
                    }
                }, 13)
            }
            _animate()
        })
    }
    promiseAnimate(ball1,100)
        .then(function(){
            return promiseAnimate(ball2,200)
        })
        .then(function(){
            return promiseAnimate(ball3,300)
        })
        .then(function(){
            return promiseAnimate(ball3,150)
        })
        .then(function(){
            return promiseAnimate(ball2,150)
        })
        .then(function(){
            return promiseAnimate(ball1,150)
        })
</script>