Question

如何在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;
    }
}

我已经使用了

var steps = stepsArray[StoryPart];
$('ManSprite').css({"animation": "play .4s steps("+steps+") infinite",
                        "-webkit-animation": "play .4s steps("+steps+") infinite" ,
                        "-moz-animation": "play .4s steps("+steps+") infinite",
                        "-ms-animation": "play .4s steps("+steps+") infinite",
                        "-o-animation": "play .4s steps("+steps+") infinite"});

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

Answer 1

我不知道步骤（2）的用途 - 您可能应该在.css（）方法中更改此元素...但是无论您想要在css中指定的动画中进行更改，那么您需要重置你的动画 - 尝试这样做：

css（仅更改＆＃39;＃ManSprite＆＃39;到＆＃39; .animation＆＃39;）：

.animation{
  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; }
}

开始动画：

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

改变动画：

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

它现在可以使用了。

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

1 个答案: