javascript - js暂停按钮的stop 循环，然后再次点击 暂停，让动画在动，请问是怎么判断？

Question

<p id="my"></p>

#my{
    position: absolute;
    left:50px;
    top:100px;
    background: #de3226;
    width:200px;
    height: 200px;
}
a{
  text-decoration:none;
  color:#000;
}
a:focus{
  color:red;
}

    var my=document.getElementById("my");
    var ss=document.getElementById("ss");
    var handle = 0;
    var lPos = 0;
    var nul=null;
    function renderLoop(){ //右边移动
        my.style.left=(lPos+=1)+"px";
        handle=window.requestAnimationFrame(renderLoop);
    }
    function rightLoop(){ //左边移动
        my.style.left=(lPos-=1)+"px";
        handle=window.requestAnimationFrame(rightLoop);
    }
    document.getElementById("ms").addEventListener("click",function(){
            renderLoop();
    });
    document.getElementById("mr").addEventListener("click",function(){
        rightLoop();
    });
   ss.addEventListener("click",function(){ //监听暂停按钮，然后停止循环，再点击暂停按钮的时候往左边移动
        if(handle){
            window.cancelAnimationFrame(handle);
            handle = null;
        }
//        else{
//            renderLoop();//这块是向右边移动 那么问题来了 。如果点击左边移动，暂停会判断向右移动。
//        }
    });

http://jsbin.com/qikutiviqo/edit?html,cs... 在线demo
昨天提问，然后晚上我修改了一下，发现有个stop按钮问题。动画不能跟着stop方向移动。
if 暂停这块是怎么判断动画是左向，然后可以停止可以开始继续让动画向左。
反之就是这样。

Answer 1

css3 > requestAnimationFrame > setIterval

Answer 2

css写动画类，动态改变元素的样式类