Modernizr-enhenced jQuery Raptorize plugin using CSS3 transitions and transforms with animate() fallback. (Only includes the changed parts)

raptorize-css3.js

// This obviously requires a Modernizr build with support for csstransforms, csstransitions and audio.
// All vendor prefixes included for clarity.

// First some better checking for HTML5 Audio
if (Modernizr.audio.mp3) {
  audioSupported = true;
  raptorAudioMarkup = '<audio id="elRaptorShriek" preload="auto"><source src="' + prefix + 'raptor-sound.mp3" /></audio>';
}
else if (Modernizr.audio.ogg) {
  audioSupported = true;
  raptorAudioMarkup = '<audio id="elRaptorShriek" preload="auto"><source src="' + prefix + 'raptor-sound.ogg" /></audio>';
}

// No biggy, here's the cool stuff.
function init() {
  // Play audio as usual.
  
  if (Modernizr.csstransforms && Modernizr.csstransitions) {
    var offset = raptor.position().left + 300,
        elem = raptor.get(0);
    
    // Without this, the raptor won't do the first vertical animation properly.
    setTimeout(function(){
      // Initial vertical animation.  Vendor prefix hell.
      elem.style.webkitTransition = 'all 0.8s ease-out';
      elem.style.webkitTransform = 'translateY(-539px) translateX(0)';

      elem.style.msTransition = 'all 0.8s ease-out';
      elem.style.msTransform = 'translateY(-539px) translateX(0)';
      
      elem.style.MozTransition = 'all 0.8s ease-out';
      elem.style.MozTransform = 'translateY(-539px) translateX(0)';
      
      elem.style.OTransition = 'all 0.8s ease-out';
      elem.style.OTransform = 'translateY(-539px) translateX(0)';

      // Now bind "transition end" events so we can do the second part
      // of the animation. Vendor prefixes ftw again.
      elem.addEventListener('webkitTransitionEnd', function(event) {
        elem.style.webkitTransition = 'all 4s ease-in';
        elem.style.webkitTransform = 'translateX(-' + offset + 'px) translateY(-539px)';
        locked = false;
      }, false);

      // Firefox and IE.
      elem.addEventListener('transitionend', function(event) {
        elem.style.MozTransition = 'all 4s ease-in';
        elem.style.MozTransform = 'translateX(-' + offset + 'px) translateY(-539px)';
        
        elem.style.msTransition = 'all 4s ease-in';
        elem.style.msTransform = 'translateX(-' + offset + 'px) translateY(-539px)';
        locked = false;
      }, false);

      // Who the hell uses Opera anyway?
      elem.addEventListener('oTransitionEnd', function(event) {
        elem.style.OTransition = 'all 4s ease-in';
        elem.style.OTransform = 'translateX(-' + offset + 'px) translateY(-539px)';
        locked = false;
      }, false);

    }, 1)
  }
  else {
    // Fallback to traditional animate() approach.
  }
}