CSS trigger javascript after transition/animation

Question

I'm not looking to trigger a CSS animation from JS, but rather the opposite.

If I do a CSS animation via the -webkit-transition or transition: all 1000ms type style sheet, is there a way to trigger a JS function after the transition is done?

Basically I've been doing animations via javascript and I want to convert some of them to CSS animations, but I need to trigger javascript events after the animations have completed.

Similiar http://stackoverflow.com/questions/2087510/callback-on-css-transition — Musa, Dec 04 '12 at 06:31
Awesome I didn't find that before posting. I need to fully test it but it seems to fit my needs. — Alberto, Dec 04 '12 at 07:17

score 5 · Accepted Answer · edited May 23 '17 at 10:27

5

box.addEventListener('webkitTransitionEnd', function( event ) { 
     alert( "Finished transition!" ); 
}, false );

See: Callback on CSS transition

edited May 23 '17 at 10:27

Community

1
1

answered Dec 04 '12 at 06:34

Jack eten

66
1

Thanks. I missed the original post. – Alberto Dec 04 '12 at 07:19

invicente · Answer 2 · 2012-12-04T07:39:24.330

1

I think you would need javascript before the transition, to trigger it, and after it. to make some sort of callback... but my knowledge is very poor

edited Dec 04 '12 at 07:39

answered Dec 04 '12 at 06:34

invicente

152
7

CSS trigger javascript after transition/animation

2 Answers2