????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>