Allows to create a set of keyframes with javascript and inject it to a stylesheet.

keyframe.js

var Keyframe = (function (){
  var keyframePrefix = (function getKeyframePrefix(){
    var t, el = document.createElement("fakeelement")
    ,animations = {
      "animation": "",
      "OAnimation": "-o-",
      "msAnimation": "-ms-",
      "MozAnimation": "-moz-",
      "WebkitAnimation": "-webkit-"
    };
    for(t in animations) if(el.style[t] !== undefined){
      return animations[t];
    }
  })();
  function Keyframe(name){
    this.name = name;
    this.steps = {};
  }
  Object.defineProperties(Keyframe.prototype, {
    'on': {
      value: function (step){
        var self = this;
        return {
          perform: function (fn){
            self.steps[step] = fn.call(null, keyframePrefix);
            return self;
          }
        };
      }
    }
    ,'create': {
      value: function (){
        var keyframes = '@' + keyframePrefix + 'keyframes ' + this.name + ' { ';
        for(var step in this.steps) if(this.steps.hasOwnProperty(step)) {
          keyframes += step + ' { ' + this.steps[step] + ' } ';
        }
        keyframes += ' }';
        if( document.styleSheets && document.styleSheets.length ) {
          document.styleSheets[0].insertRule(keyframes, 0);
        } else {
          var s = document.createElement( 'style' );
          s.innerHTML = keyframes;
          document.head.appendChild( s );
        }
        return null; // we return null because once created, we don't need to change it
      }
    }
  });
  return Keyframe;
})();