Changing animation property in css using javascript

Question

How do I change the animation property after setting it inside of a css file?

This is my 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; }
}

and I've used both of these methods to try and change the amount of steps needed.

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

and I've used

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

but neither of them work at changing the amount of steps I need in the animation.

@AlexShilman Yes I am, but I already have that part. I edited so you can see the css. All I truly need help in is being able to adjust the steps — Kelsey Abreu
– Kelsey Abreu, Commented Jan 30, 2014 at 13:50

webdev-dan · Accepted Answer · 2014-01-30 14:35:08Z

3

i don't know what steps(2) is for - you probably should change just this element in .css() method ...but whatever you want to change in animation specified in css then you need to reset your animation - try doing it like this:

css (change only '#ManSprite' to '.animation'):

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

to start animation:

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

to change animation:

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

it will work now.

edited Jan 30, 2014 at 14:35

answered Jan 30, 2014 at 13:59

webdev-dan

1,3597 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kelsey Abreu Over a year ago

It definitely is going in the right direction, however after I add it the first time it does not want to update again. Maybe it's something on my side. I'll check again

webdev-dan Over a year ago

did you read my edit? ..which css property is being set to "steps(2)"? what is the name of it? ...you should only change this one in javascript

webdev-dan Over a year ago

animation is a shorthand property - the one i was asking for is animation-timing-function i edited my answer - try it now.

webdev-dan Over a year ago

...and probably you will need to set "-webkit-animation-timing-function", "-moz-animation-timing...." also. ...and i think you need to write separate properties in css instead of a shorthand "animation" - this is how i change my animation and it works just fine.

Kelsey Abreu Over a year ago

Hehe it was my fault. I was setting the animations before I reset the class. Thanks again!! BUUUT can you help me on one small problem? In firefox the method cssStyleSheet.insertRule does not want to work for me. Mind looking at my other question?

Collectives™ on Stack Overflow

Changing animation property in css using javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related