Question

I was wondering if it is possible to generate a webkit animation with javascript. Basically all I need is that if i click element A, element B should be animated with a random parameter every time(this is why I cant use a pre-fixed CSS). I’m testing if I can actually generate all this through javascript and Ive gotten pretty far. My code does not do anything random yet but it is really easy to make it random once I get it to work right with javasript. So right now I just want to animate element B every time I click element A. My code looks like this:

$("#elementA").live('touchstart mousedown',function() {

$("head style").remove();
var cssAnimation  = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('@-webkit-keyframes random_spin {'+
'from   { -webkit-transform: rotate(0deg);      }'+
'to     { -webkit-transform: rotate(1440deg);   }'+
'}');

cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);

$("#elementB").removeClass("random_spin");
$("#elementB").css({'-webkit-animation-name': ''});

$("#elementB").css({'-webkit-animation-name': 'random_spin'});
$("#elementB").addClass("random_spin");
});

There I just added the animation to the header and I applied it to elementB.

My “random_spin” class is a CSS I already predefined :

.random_spin {
    -webkit-animation-duration:         5s;  
    -webkit-animation-timing-function:  ease;
}

My intention with this is that I should be able to make my elementB spin every time I click on elementA. Unfortunately it only does it once and no matter how much I click on it or how many times I reset the animation name it still only does it once. What am I doing wrong?

Answer 1

To restart a CSS3 animation you cannot just remove and add a class without putting a small delay between the commands. This allows the browsers time to actually remove the class before adding the new one. You can do this with a simple setTimeout

setTimeout(function(){
    $("#elementB").addClass("random_spin");
}, 100);

More information and examples can be found below.

http://css-tricks.com/restart-css-animation/