Randomizing CSS3 animation times with javascript/jquery?

Question

I'd like to randomize the duration of a given animation every page refresh. I've been trying it with jquery, but it doesn't seem to be working: I have that doesn't seem to be working.

Relevant css:

#background1 {
    -webkit-animation: background1 10s;
}

Animation background1 is defined elsewhere; I'm not trying to change the keyframe animation part.

Jquery:

 var bg1 = $('#background1');
 var number = Math.floor(Math.random() * 10) + 5;
 bg1.css('-webkit-animation', 'background1 ' + number + 's');

Nothing seems to happen. Help out a jquery noob?

Answer 1

When the browser registers your CSS declaration it registers the name of the animation background1 and the duration of 10s and then starts the animation immediately. If you want to restart the animation with a new duration you must wait till the animation finishes, or you must attach a different animation name with the new duration.

You can test at this fiddle: http://jsfiddle.net/mfdj/Phnf5/9/

1. You can always immediately trigger an animation when you change the name
2. You can restart the same animation by changing just the duration only if you set a different value for the duration and do so after the the current animation has finished

Since your initial animation is 10s long and you want to immediately trigger a duration with a randomized time you should simply remove this declaration:

#background1 {
    -webkit-animation: background1 10s;
}

and you should get the result you want.

Please note that there are some quirks in the way browsers handle reattaching/retriggering css animations with the same name but different durations. For instance, in the example fiddle Chrome handles the shake and flash animations differently. Try starting a 10second animation and then interrupt with a 1second animation of the same name. The shake will finish it's 10s while the flash simply clears the animation. However, if you switch from flash to shake (and vice versa) the animation always starts fresh. These are the quirks of triggering animation with css that you must be aware of.

Answer 2

What other answers said is wrong! .... That css is fine , it does what the answer above me said but is overwritten by jquery . In fact, your jquery is almost fine as well too.

You just get the animation function in css wrong .

You are never defining the animation to run. You are attaching animation to element using jquery successfully. But what animation.

Take a look at my example: http://jsfiddle.net/techsin/Lju95/1/

To learn more about it go here: http://css-tricks.com/snippets/css/keyframe-animation-syntax/

In bg1.css('-webkit-animation', 'background1 ' + number + 's'); background1 should refer to animation name not the element name which you are already referring to by bg1 , aren't you?

Animation name and animation itself can be defined in css, and then be called with new random value.

To learn jquery easily go to here: https://tutsplus.com/course/30-days-to-learn-jquery/

To learn Html/Css3: go to w3schools.com then http://learncss.tutsplus.com/

Answer 3

As Fox pointed out - remove that declaration. Then, with your JS you can do something like:

var bg1 = $('#background1');
var number = Math.floor(Math.random() * 10) + 5;
bg1.css('-webkit-animation', 'background1 ' + number + 's');

You could also put it in a class to keep things cleaner (kinda)

#background1 .animated {
    -webkit-animation-name: background1;
}

// jQ
$('#background1').addClass('animated').css(
    '-webkit-animation-duration',
    (Math.floor(Math.random() * 10) + 5) + 's'
);