two keyframe that implement first after another

Question

i have a div that it needs two effect that must implement one after another.i use delay() (in jquery) between two animation but it has not required result.indeed i wanna chain two keyframe.What is the proposed solution? thank a lot

but i use css3 for animate and use jquery for select element and bind event — aminkourosh, Jul 01 '12 at 16:33

score 1 · Answer 1 · answered Jul 01 '12 at 16:21

1

jQuery's animate() has a built in callback function:

$("#elementID").animate({top: 0}, 1000, function() {
    $(this).animate({top: 1000}, 1000);
});

answered Jul 01 '12 at 16:21

adeneo

312,895
29
395
388

score 0 · Answer 2 · answered Jul 01 '12 at 16:41

Webkit has an animation delay property, but that is only Webkit. I'd highly recommend using jQuery for your animations.

Check out this Stack Overflow question: http://stackoverflow.com/questions/7825509/css3-chain-animations

jQuery transit is also a nice plugin for using CSS3 animations, while using jQuery syntax. http://ricostacruz.com/jquery.transit/

two keyframe that implement first after another

2 Answers2