Set the webkit-keyframes from/to parameter with JavaScript

Question

Is there any way to set the from or to of a webkit-keyframe with JavaScript?

Answer 1

To solve this I added a 'webkit animation name' to my CSS selector and then created separate rules for my options, in my example red and yellow colouring:

.spinner {
-webkit-animation-name: spinnerColorRed;
}

@-webkit-keyframes spinnerColorRed {
  from {
    background-color: Black;
  }
  to {
    background-color: Red;
  }
}

@-webkit-keyframes spinnerColorYellow {
  from {
    background-color: Black;
  }
  to {
    background-color: Yellow;
  }
}

Then using jQuery:

$("#link").click(function(event) { 
  event.preventDefault();
  $(".spinner").css("-webkit-animation-name", "spinnerColorYellow");
});