使用javascript更改css中的动画属性

在css文件中设置动画属性后，如何更改动画属性

这是我的css：

#ManSprite{
    overflow:hidden;
    width:200px;
    height:200px;
    position:absolute;
    top:280px;
    left:140px;
    background-image: url("images/ManSprite.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; }
}

我已经使用了这两种方法来尝试改变所需的步骤数量

var ss = document.styleSheets[0];

for(var i =0;i<ss.cssRules.length;i++){
    if(ss.cssRules[i].selectorText === "#ManSprite"){
        ss.cssRules[i].styles.animation = "play .4s steps("+stepsArray[StoryPart]+") infinite";
        ss.cssRules[i].styles.MozAnimation = "play .4s steps("+stepsArray[StoryPart]+") infinite";
        break;
    }
}

但是它们都不能改变我在动画中需要的步骤数量。

我不知道第（2）步是为了什么-你可能应该在.css（）方法中只改变这个元素…但是无论你想在css中指定的动画中改变什么，你都需要重置动画-试着这样做：

css（仅将“#ManSprite”更改为“.animation”）：

要启动动画，请执行以下操作：

$('#ManSprite').addClass('animation');

$('#ManSprite').removeClass('animation').css(
    'animation-timing-function','steps('+steps+')' );
$('#ManSprite').addClass('animation');

要更改动画，请执行以下操作：

$('#ManSprite').addClass('animation');

$('#ManSprite').removeClass('animation').css(
    'animation-timing-function','steps('+steps+')' );
$('#ManSprite').addClass('animation');

---

现在可以了。

你想改变图像的背景位置吗？@AlexShilman是的，但我已经有了那个部分。我进行了编辑，以便您可以看到css。所有我真正需要的帮助是能够调整stepsIt肯定是在正确的方向，但在我第一次添加它后，它不想再次更新。也许是我这边的事。我再查一下，你看了我的编辑吗。。哪个css属性被设置为“步骤（2）”？它叫什么名字。。。您应该只在javascriptanimation是一个速记属性中更改此属性-我要的是

动画计时功能

我编辑了我的答案-现在尝试一下…可能您还需要设置“-webkit动画计时功能”、“-moz动画计时…”。。。我认为你需要用css编写单独的属性，而不是用速记的“动画”——这就是我如何改变我的动画，它工作得很好，呵呵，这是我的错。在我重置课程之前，我正在设置动画。再次感谢！！你能帮我解决一个小问题吗？在firefox中，cssStyleSheet.insertRule方法不适合我。介意看看我的另一个问题吗？