r.css() return null

[blpraveen]

I am adding keyframe function to the plugin I am working. I found this problem in KeyframeRule. I am still in testing.

The plugins is clone of swatchbook plugin which shows color code. I have to modify the plugin to animate the color panels full 360 deg and close at 180 deg

var KeyframeRule = function(r) {
    this.original = r;
    this.keyText = r.keyText;
    this.css = r.css();
};

//loop through the each color panels and create a keyframe to each panel with different keyframe

        this.$items.each( function( i ) {
            //insert keyframes to each transition elements
            self.styles.sheet.insertRule("@" + (self._getVendorPrefix()) + "keyframes " + self.options.keyFrameName + i + "{  0% { transform : rotate(0deg)} , 50% { transform' : rotate(0deg)} , 100% { transform' : rotate(0deg) } ", 0); 
        });

Here also I got one error If I create a key frames without any css within it .It gives error in jquery.

Here is the function which index all keyframes

        _indexRules : function() {
            this.keyframes = [];
            this.keytexts = [];
            this.keyframeHash = {};     
            for(var i=0; i<this.styles.sheet.cssRules.length; i++) {
                var rule = new KeyframeRule(this.styles.sheet.cssRules[i]); 
                this.keyframes.push(rule);
                this.keytexts.push(rule.keyText);
                if(rule.keyText) {
                    this.keyframeHash[rule.keyText] = rule; 
                }
            }
        },      

And I get the error calling this function r.css() "is not a function"

[blpraveen]

When I call this keytext it returns undefined

this.styles.sheet.cssRules[i].keyText

and cssText return the css @keyframes swatchBook1 { 0% { transform: rotate(0deg); } }

[blpraveen]

I am using a name instead of a keyText it gives the keyframe name. Now css() is not returning key values

var rules = this.style.cssText.split(';'); I get style is undefined