How can I adjust the number of steps in an animation property set within a CSS file?
This is the CSS code I am using:
#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; }
}
I have tried two different methods to change the number of steps required for the animation.
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;
}
}
Additionally, I attempted another approach as shown below:
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"});
Unfortunately, neither of these methods were successful in changing the step count in the animation.