Javascript to change keyframe values in external css sheet (No Inline Style Changes!)

Question

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.

Answer 1

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.

Answer 2

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 .