使用Javascript更改css中的不同关键帧

我正在创建一个小网站，通过css和精灵动画讲述一个故事

我遇到的问题是，一旦我在css文件中设置了关键帧，我就不知道如何更改这些关键帧，尤其是当我试图使其与所有浏览器兼容时

这是我的

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; }
}

然后在我的javascript中，我想更改每个关键帧的背景位置，但我不确定如何更改它。我试过以下方法，但不起作用

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;

}

这让我很困惑，因为它能够很好地使用deleteRule

---

有人使用过这些吗？

如果您试图设置的那些值不是动态的，那么我宁愿首先将它们放入不同的样式表规则中，然后通过使用JS更改元素的类来在应用的规则之间切换。@CBroe所以您的意思是创建多个播放，播放1，播放2，等等，然后使用我存储的不同值？下面的帖子可能会有你想要的答案：@webdev dan已经检查过了。我不再有主要的问题，我现在的问题是由于某种原因insertRule不能在firefox中工作。从未使用过这个…但正如我在docs（）中注意到的那样，insertRule需要两个参数-如下：

keyframes.insertRule（“0%{background position:+fromValue+”；}），keyframes.cssRules.length）
keyframes.insertRule("0% {background-position: " + fromValue + ";}");