Simple fade rAF code, tweaked from MDN documentation

rAFader.js

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;


var start = null;

var d = $('.js-fader');

// Prep the element for animation
d.css('opacity', 0);

function step(timestamp) {
  var progress;
  if (start === null) start = timestamp;
  progress = timestamp - start;

  // Start of render code
  if (progress < 1000) { // Until the progress hits 1
    d.css({
      opacity: Math.min(progress/1000, 1)
    });
  } else if (progress > 2000) { // If the progress hits 2, reset everything
    start = null;
  } else { // After the progress hits 1, reverse time
    d.css('opacity', (1 - progress/1000) + 1);
  }
  // End of render code

  // Step by step (recursively)
  requestAnimationFrame(step);
}

requestAnimationFrame(step);