Changing the different Keyframes in css using Java

问题:

I'm creating a small website that tells a story by using css and sprite animation.

The problem I'm encountering is that I do not know how to change the keyframes once I have set them in the css files expecially while I try to make it compatible with all of the browsers.

Here is what I have,

the main part of the css:

#ManSprite{
    overflow:hidden;
    width:200px;
    height:200px;
    position:absolute;
    top:280px;
    left:140px;
    background-image: url("http://imageshack.com/a/img571/1710/2r1h.png");
    z-index:99;
    animation: play .4s steps(2) infinite;
    -webkit-animation: play .4s steps(2) infinite;
    -moz-animation: play .4s steps(2) infinite;
    -ms-animation: play .4s steps(2) infinite;
    -o-animation: play .4s steps(2) infinite;
}

@keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

@-webkit-keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

@-moz-keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

@-ms-keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

@-o-keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

Then in my javascript I would like to change the background position for every keyframe but I'm not sure how to change it. I've tried the following but it does not work.

var StoryPart = 0;

var fromArray = new Array("0px", "-200px", "-800px", "-1400px", "-2200px", "-3200px");
var toArray = new Array("0px", "-600px", "-1400px", "-2200px", "-3230px", "-4000px");
var stepsArray = new Array(0, 2, 3, 4, 5, 4);


function nextBtn() {
    StoryPart++;

    startChange();

}

// begin the new animation process
function startChange() {
    // remove the old animation from our object
    document.getElementById('ManSprite').style.webkitAnimationName = "none";
    document.getElementById('ManSprite').style.animationName = "none";
    document.getElementById('ManSprite').style.msAnimationName = "none";
    document.getElementById('ManSprite').style.oAnimationName = "none";
    document.getElementById('ManSprite').style.mozAnimationName ="none";

    // call the change method, which will update the keyframe animation
    setTimeout(function () { change("play", fromArray[StoryPart], toArray[StoryPart]); }, 0);
}


// search the CSSOM for a specific -webkit-keyframe rule
function findKeyframesRule(rule) {
    // gather all stylesheets into an array
    var ss = document.styleSheets;

    // loop through the stylesheets
    for (var i = 0; i < ss.length; ++i) {

        // loop through all the rules
        for (var j = 0; j < ss[i].cssRules.length; ++j) {

            // find the -webkit-keyframe rule whose name matches our passed over parameter and return that rule
            if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule
                || ss[i].cssRules[j].type == window.CSSRule.KEYFRAMES_RULE && ss[i].cssRules[j].name == rule
                )
                return ss[i].cssRules[j];
        }
    }

    // rule not found
    return null;
}

// remove old keyframes and add new ones
function change(anim, fromValue, toValue) {
    // find our -webkit-keyframe rule
    var keyframes = findKeyframesRule(anim);

    // remove the existing 0% and 100% rules
    keyframes.deleteRule("0%");
    keyframes.deleteRule("100%");

    // create new 0% and 100% rules with random numbers
    keyframes.insertRule("0% {background-position: " + fromValue + ";}");
    keyframes.insertRule("100% {background-position: " + toValue + ";}");

    // assign the animation to our element (which will cause the animation to run)
    document.getElementById('ManSprite').style.webkitAnimationName = anim;
    document.getElementById('ManSprite').style.animationName = anim;
    document.getElementById('ManSprite').style.msAnimationName = anim;
    document.getElementById('ManSprite').style.oAnimationName = anim;
    document.getElementById('ManSprite').style.mozAnimationName = anim;

}

For some reason in Chrome, it doesn't find any cssRule inside the findKeyframesRule method, but in firefox it does. Firefox crashes, however, on this line

keyframes.insertRule("0% {background-position: " + fromValue + ";}");

which confuses me because it was able to use deleteRule well.

Anyone ever work with these?