How to control CSS 3.0 Animations with Javascript / Jquery

The situation – lets say you are using a CSS keyframe animation (I will give an example below) and you wish to make it faster and faster, or slower and slower. The problem: there is not way in Javascript (or Jquery if you prefer) to target a specific CSS value of a specific class, I will explain what I mean – consider the following spin keyframe animation:

.spinClass {
  -webkit-animation:spin 5s linear infinite;
  -moz-animation:spin 5s linear infinite;
  animation:spin 5s linear infinite;
}

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

If you assign the class="spinClass" to any element in your HTML code, it will spin that element around in an animation that would last 5 seconds.

If you wanted a faster animation, you could set a new class, say – .fasterSpinClass with a smaller duration attribute, something like:

.fasterSpinClass {
  -webkit-animation:spin 2s linear infinite;
  -moz-animation:spin 2s linear infinite;
  animation:spin 2s linear infinite;
}

Notice that this class is using the same keyframes, but has got a different animation duration.

OK, but if you wanted a variable animation speed? I had this challenge when I developed the game VisualTrivia, which required the speed of the animations to become faster and faster as the player progressed in game levels. If we have 100 game levels, you wouldn’t expect me to set 100 different classes and flick them around. You would want to somehow parameterize the animation.

Issue is, that trying to assign a new attribute to the class, something like –

$(".spinClass").css("-webkit-animation","spin 2s linear infinite");

Or, if you wanted to parametrize it, something like:

var myAnimationSpeed="2";

// change myAnimationSpeed as user progresses in game levels

$(".spinClass").css("-webkit-animation","spin " + myAnimationSpeed + "s linear infinite");

This would actually not change the -webkit-animation CSS value of the spinClass, but rather target all the elements which were assigned with the spinClass, add would add them a css attribute as defined. In other words, it won’t work.

So solve this issue, I would suggest not to define classes for that animation, but to target the CSS values of the required elements directly. The following should work well:

Step 1, define the keyframe animation without any associated animation class:

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

Step 2, define a Javascript function that would activate the animation on all elements that you assigned with the spinClass:

function activateSpinAnimation(secondsToRun=5) {
  $(".spinClass").css("-webkit-animation","spin "+secondsToRun+"s linear infinite");
  $(".spinClass").css("-moz-animation","spin "+secondsToRun+"s linear infinite");
  $(".spinClass").css("-o-animation","spin "+secondsToRun+"s linear infinite");
  $(".spinClass").css("animation","spin "+secondsToRun+"s linear infinite");
}

Step 3, use the function whenever you wanted to activate the animation, just call:

var myAnimationSpeed = 2;

// calculate / change animation speed

activateSpinAnimation(myAnimationSpeed);

Good luck 🙂

Eran