0

What I am trying to do is depending on a variable I get, change the 100% rotate value in the keyframe to the new calculated value. I have no problem with using Javascript to do this, but I want it to be done in the External CSS, not inline, once changed I need to restart the animation for that time. Is this possible? If so, how? (NOTE ALL DONE CURRENTLY THROUGH BUTTON CLICK) this is not to be saved, only done to update the graphic with a new position. 

.arrow {
    -webkit-animation: rotate 3s linear 0 1;
    animation: rotate 3s linear 0 1;

    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);

    -webkit-animation-play-state: paused;
    animation-play-state: paused;

    visibility: visible !important; 
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }   
    100% {
        -webkit-transform: rotate(360deg);
    }   
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }       
}

Any help will be much appreciated! I have been trying to find something that would work for about a week now.

Korey
  • 54
  • 7
  • 1
    Javascript can't change external files, it can access external stylesheets, but it can't save them, which would be the only reason for changing the style in the external stylesheet to begin with – adeneo Jan 18 '15 at 06:42

2 Answers2

0

So, as adeneo mentioned, it is not possible to make javascript change an external style sheet.

The thing you can do is make 2 css classes and use javascript to change the class. This way you are not using inline styles.
Also, because you are changing the class, the animation will begin from the start - as you want it.

AbdealiLoKo
  • 3,261
  • 2
  • 20
  • 36
  • The main problem with just making new classes, is that I need it to start the animation from whatever the current location is, and move to a calculated angle. – Korey Jan 19 '15 at 19:13
  • I see, sorry, i thought you wanted to reset the animation completely. If you want a continuous animation it is recommended you use javascript animations or jquery's animate function - css animations are fairly limited as css doesnt have good event handling – AbdealiLoKo Jan 20 '15 at 00:52
0

It is possible to change keyframes on loaded stylesheets. Here you have a stack overflow answer from 2011. And here's a link to a recent blog post about it.

Community
  • 1
  • 1
HotFudgeSunday
  • 1,403
  • 2
  • 23
  • 29