let start = null;
const element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

const step = timestamp => {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

(function(global){
  var nowOffest = Date.now(); // 브라우저의 실행시점
  var timeStamp = function(){
    // performance가 있는지 확인
    if(global.performance && 
       typeof global.performance.now && 
       typeof global.performance.now === 'function'
    ){
      return global.performance.now();
    }
    // fallback
    return Date.now() - nowOffest;
  }

})(window);

(function(global){
  // timeStamp...

  var prefix='';
  if('mozRequestAnimationFrame' in global){
    prefix = 'moz';
  }else if ('webkitRequestAnimationFrame' in global){
    prefix = 'webkit';
  }

  if(!!prefix){
      global.requestAnimationFrame = function(callback){
        return global[prefix + 'RequestAnimationFrame'](function(){
          callback(timeStamp());
        });
    }

    global.cancelAnimationFrame = global[prefix + 'CancelAnimationFrame'];
  }
})(window);

if(!!prefix){
  // raf를 지원하는경우
}else{
  var lastTime = Date.now(); // 클로저
  global.requestAnimationFrame = function(callback){
    var currentTime = Date.now();
    var delay = lastTime - currentTime + 16;
    
    if(delay < 0){
      delay = 0;
    }

    lastTime = currentTime;

    return setTimeout(function(){
      lastTime = Date.now();
      callback(timeStamp());
    }, delay);
  };

  global.cancelAnimation = clearTimout;
}

(function(global){
  // timeStamp...
  var nowOffest = Date.now(); // 브라우저의 실행시점
  var timeStamp = function(){
    // performance가 있는지 확인
    if(global.performance && 
       typeof global.performance.now && 
       typeof global.performance.now === 'function'
    ){
      return global.performance.now();
    }
    // fallback
    return Date.now() - nowOffest;
  }

  var prefix='';
  if('mozRequestAnimationFrame' in global){
    prefix = 'moz';
  }else if ('webkitRequestAnimationFrame' in global){
    prefix = 'webkit';
  }

  if(!!prefix){
      global.requestAnimationFrame = function(callback){
        return global[prefix + 'RequestAnimationFrame'](function(){
          callback(timeStamp());
        });
    }

    global.cancelAnimationFrame = global[prefix + 'CancelAnimationFrame'];
  }else{
    var lastTime = Date.now(); // 클로저
    global.requestAnimationFrame = function(callback){
      var currentTime = Date.now(),
          delay = lastTime - currentTime + 16;
      if(delay < 0){
        delay = 0;
      }
      lastTime = currentTime;

      return setTimeout(function(){
        lastTime = Date.now();
        callback(timeStamp());
      }, delay);
    };

    global.cancelAnimation = clearTimout;
  }
})(window);