Keyframes JQuery Add Dynamically
JavaScript
var prefix = "",
prefixes = ['WebKit', 'Moz'];
for(var i=0; i<prefixes.length; i++) {
if(window[prefixes[i]+'CSSKeyframesRule'])
prefix = prefixes[i];
}
window[prefix+'CSSKeyframesRule'].prototype.css = function() {
var css = {};
var rules = this.style.cssText.split(';');
for(var i=0; i<rules.length; i++) {
var parts = rules[i].split(':'),
key = $.trim(parts[0]),
value = $.trim(parts[1]);
if(key !== '' && value !== '')
css[key] = value;
}
return css;
};
var KeyframeRule = function(r) {
this.original = r;
this.keyText = r.keyText;
this.css = r.css();
};
var VendorPrefix = function() {
var ua;
ua = navigator.userAgent;
if (ua.indexOf("Opera") !== -1) {
return "-o-";
} else if (ua.indexOf("MSIE") !== -1) {
return "-ms-";
} else if (ua.indexOf("WebKit") !== -1) {
return "-webkit-";
} else {
return "";
}
}
var styles = document.createElement('style');
$(styles).attr({
class: "keyframe-style",
type: "text/css"
}).appendTo("head")
styles.sheet.insertRule("@" + (VendorPrefix()) + "keyframes { 0% { transform : rotate(0deg)} , 50% { transform : rotate(0deg)} , 100% { transform : rotate(0deg) } ", 0);
var keyframes = [];
var keytexts = [];
var keyframeHash = {};
for(var i=0; i< styles.sheet.cssRules.length; i++) {
var rule = new KeyframeRule(styles.sheet.cssRules[i]);
keyframes.push(rule);
keytexts.push(rule.keyText);
if(rule.keyText) {
keyframeHash[rule.keyText] = rule;
}
}
console.log(keyframes );