CODEWITHSUNDEEP
csstransition
stephenwil
stephenwil

Reputation: 534

chaining css3 transitions

What's the best method for chaining together css3 transitions - ie move one element after another has finished. Crude way would be to simply use setTimeout(), better way to listen for the transition end event? Any other ideas?

Thanks.

Upvotes: 1

Views: 145

Answers (2)

Brian
Brian

Reputation: 2829

Jquery Transit is a really cool library for this. It animates using CSS, and gives you call backs when it completes, so you can chain them like this:

$('.box').
transition({ x: '-40px' }, 250).
transition({ x: '0px' }, 250).
transition({ y: '-40px' }, 250).
transition({ y: '0px' }, 250);

Upvotes: 1

Cody
Cody

Reputation: 2482

Set a delay on the second transition that is the length of the first. http://www.w3schools.com/cssref/css3_pr_transition-delay.asp

or use keyframes: https://stackoverflow.com/a/7294539/1431252

Upvotes: 3

Related Questions