Skip to content

Instantly share code, notes, and snippets.

@pgarciacamou
Created February 18, 2015 19:27
Show Gist options
  • Save pgarciacamou/463bab3b27180e82476e to your computer and use it in GitHub Desktop.
Save pgarciacamou/463bab3b27180e82476e to your computer and use it in GitHub Desktop.
Allows to create a set of keyframes with javascript and inject it to a stylesheet.
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;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment