Comments on: Restart CSS Animation

By: Divya Manian

Divya Manian — Sat, 28 May 2011 20:11:14 +0000

Just wanted to say, if you wish to cancel an infinitely repeating event, you can check for this event 'webkitAnimationIteration' which is fired whenever the animation iteration count is more than 1.

By: kiralik iskele

kiralik iskele — Thu, 19 May 2011 17:33:09 +0000

I will translate the Restart CSS Animation to my language Turkish.

By: SureFire Web

SureFire Web — Wed, 11 May 2011 14:26:09 +0000

And the debate goes on! This was actually my question also. Why start mixing css animations and javascript animations? Seems like it would be a pain to come back to in the future.

I think it’ll be easier to stick with one and since CSS isn’t really ready yet (browser support, inability to restart animations), just stick with javascript.

By: Oscar Broman

Oscar Broman — Wed, 11 May 2011 10:49:50 +0000

Hello, I ran into this problem not so long ago, the way I solved it was by removing the class then setting a 0ms timer for re-adding it.

$('something').removeClass('anim').animate({'nothing':null}, 1, function () {
	$(this).addClass('anim');
});

Simple, yet effective!

By: Lee Kowalkowski

Lee Kowalkowski — Tue, 10 May 2011 07:55:02 +0000

Jesper, I agree it’s nicer, but that’s the approach that the article says is not working, isn’t it?

By: Jesper Ek

Jesper Ek — Mon, 09 May 2011 08:49:28 +0000

Another way of doing it using addClass/removeClass is to force a reflow between the calls, which is a bit nicer than setTimeout imho:

$(this).removeClass(‘trigger’).width(); // reading width() forces reflow
$(this).addClass(‘trigger’);

By: Rick Lamers

Rick Lamers — Fri, 06 May 2011 20:30:11 +0000

From what I’ve seen jQuery/Javascript animations are smoother then CSS3 ones…

By: iskele

iskele — Fri, 06 May 2011 13:58:00 +0000

Very useful thanks.

By: Rafał Krupiński

Rafał Krupiński — Fri, 06 May 2011 11:19:45 +0000

I bellieve that’s because IE8 does not support css animations.

By: Jatin

Jatin — Fri, 06 May 2011 10:50:34 +0000

Animation was smooth on Safari and Chrome, but not on IE 8. I haven’t tried on Firefox though.