Get CSSKeyframesRule length

Question

I'm iterating through a CSS keyframe in order to change the original to a new animation based on the keyframe that is closest the current behavior of the element being animated. I use the function below to obtain the keyframe rules by iterating through the stylesheets.

function findKeyframesRule(rule) {
    var ss = document.styleSheets;
    for (var i = 0; i < ss.length; ++i) {
        for (var j = 0; j < ss[i].cssRules.length; ++j) {
            if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE 
               && ss[i].cssRules[j].name == rule) { 
                return  ss[i].cssRules[j]; 
            }
        }
    }
    return null;
}

called like so: var keyframes = findKeyframesRule(anim);

My Problem: I need to get the length/size of ss[i].cssRules[j] (or the variable keyframes because they point to the same WebkitCSSKeyframesRule object) but have been unable to find a way to do so. I found what I think is the source for CSSKeyframesRules here, but it is in C, so I am unable to use the methods they use to find the length/size, i.e. ::length and such.

I know it has a length because I can call things like keyframes[3].keyText and get a value, so it acts like an array.

I have tried keyframes.size(), keyframes.forEach, keyframes.length, and some more attempts but they don't work because it's not an array, it's a CSSKeyframesRule object. I also attempted work arounds using the ¿parent? (I don't what to call it - I mean ss, ss[i], and ss[i].cssRules) including ss[i].cssRules.length which I thought would work but it doesn't.

Here is a fiddle to show my problem

Do any of you have any ideas?

Answer 1

Your code is working fine. Just try to alert

keyframes.cssRules.length

will get 5

alert(keyframes.cssRules.length);

Fiddle: http://jsfiddle.net/creativevilla/T83Nc/