CSS3 animation time randomization with javascript / jquery?

Question

I would like to randomize the duration of this animation by updating each page. I tried this with jquery, but it doesn't seem to work: it doesn't work for me.

Corresponding css:

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

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

Jquery:

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

Nothing happens. Help jquery noob?

Answer 1

When the browser registers your CSS ad, it registers the animation name background1 and duration 10s , and then immediately starts the animation. If you want to restart the animation with a new duration, you must wait for the animation to finish or add a new animation name with a new duration.

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

• You can always immediately call the animation when changing the name
• You can restart the same animation by changing only the duration, only if you set a different value for the duration and do it after the current animation is completed

Since your initial animation lasts 10 seconds, and you want to immediately call the duration in a randomized time, you should simply delete this announcement:

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

and you should get the desired result.

Please note that there are some quirks in how browsers handle rewrite / rewrite css animations with the same name, but with different durations. For example, in the sample script, Chrome handles shaking and flash animations differently. Try to start the animation for 10 seconds, and then interrupt it with a one-second animation with the same name. The shake will end for 10 seconds, and the flash will simply clear the animation. However, if you switch from flash to shake (and vice versa), the animation always starts fresh. These are the quirks of running css animations you should be aware of.

Answer 2

What other answers were written incorrectly! .... That css is excellent , it does what the answer above said to me, but is rewritten by jquery . In fact, your jquery is also almost perfect.

You just get the animation function in css wrong .

You never define an animation to run. You successfully attach animation to an element using jquery. But what an animation.

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

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

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

The animated name and the animation itself can be defined in css and then called with a new random value.

To learn how to jquery easily go 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 indicated by Fox - delete this ad. Then using 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 can 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' );