<div id="box" onclick="startDomAnimation();"> </div>
<script>
    (function(){

        // グローバル関数
        window.startDomAnimation = startAnimate;

        var box = document.getElementById("box");
        var intervalId = null;
        var currentLeft = 0;

        // アニメーション開始
        function startAnimate() {
            currentLeft = 0;
            box.style.position = "relative";
            box.style.left = "0%";
            if (intervalId){
                clearInterval(intervalId);
            }
            intervalId = setInterval(onAnimate, 1000 / 60);
        };

        // アニメーション中
        function onAnimate() {
            currentLeft += 1;
            if (500 < currentLeft) {
                clearInterval(intervalId);
                completeAnimate();
            } else {
                box.style.left = currentLeft + "%";
            }
        };

        // アニメーション終了
        function completeAnimate() {
            box.style.left = "0%";
        };

    })();
</script>