CSS animation doesn't restart when resetting class

Question

I am using CSS shader + animation. My shader class is defined as follows:

.shader{
-webkit-filter :custom(url(v.vs) mix(url(f.fs) multiply destination-over), 200 200);
-webkit-animation-name: test;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1
}

I am trying to set/unset the styles(shader+animation) dynamically using jquery through $('#holder').addClass('shader'); and $('#holder').removeClass('shader');

However, the weird thing is when I reset the class (e.g., calling addClass after removeClass), only the shader gets reapplied but the animation doesn't (I have hooked the AnimationStart event to see when my animation starts). Anyone know why this is the case and how I can solve it?

Edit: I added a simplified version of JSfiddle snippet here. Essentially I'm re-applying the animation to a div twice but the actual animation only gets called the first time.

Did you try keeping the animation properties in a separate class that is never removed? — bfavaretto, Apr 17 '13 at 03:31
mmmm no but I don't think that would help, since I only have 1 iteration and I call removeClass after the animationEnd event — Discombobulous, Apr 17 '13 at 03:46
Can you post a [jsFiddle](http://jsfiddle.net/) so we can have a better look — apaul, Apr 17 '13 at 03:53
Possible duplicate of [Restart animation in CSS3: any better way than removing the element?](http://stackoverflow.com/questions/6268508/restart-animation-in-css3-any-better-way-than-removing-the-element) — V Maharajh, Jun 29 '16 at 03:16

score 29 · Answer 1 · answered May 17 '13 at 23:42

The problem is that, even though you remove and then re-apply the animated class, you do this in the course of a single, blocking function. When your function exits, it appears to the rendering engine that nothing has changed.

One solution (the one that you chose), is to clone the element and destroy the original. This is fine, but if you had any event bindings to the original element (i think) they they will be destroyed too.

Another approach is to remove the animated class from the element, and then wrap the code that re-applies the class inside of a setTimeout() call with a very small delay, e.g.

$('#holder').removeClass('shader');
setTimeout(
    function(){$('#holder').addClass('shader')}
    , 1);

I've tweaked your jsfiddle to use this approach: http://jsfiddle.net/HuFBN/7/

This is the correct answer. Extra points go for explaining why this hack is needed ("When your function exits, it appears to the rendering engine that nothing has changed"). — Agoston Horvath, Jul 10 '14 at 09:47
This worked for me. What I also like about it this too is that you can easily adjust the delay in this approach as when it should start again. thanks! — klewis, Nov 10 '15 at 17:18

score 5 · Answer 2 · answered Jun 06 '14 at 15:04

5

According to a 2011 article on css-tricks.com, triggering a reflow in between removing and adding the class will restart the animation. Example (verbose):

$('#holder').removeClass('shader');
$('#holder').offsetWidth = $('#holder').offsetWidth; // triggers reflow
$('#holder').addClass('shader'); // restarts animation

answered Jun 06 '14 at 15:04

feklee

7,555
9
54
72

Apparently this breaks in javascript strict mode. – Adam Sep 05 '14 at 01:36
@Adam I don't see how this breaks strict mode. Do you have more details? – feklee Sep 08 '14 at 13:45

score 4 · Accepted Answer · answered Apr 17 '13 at 05:19

4

I think I figured it out. According to this, css animation can't get applied to the same node twice (even if you have a different animation!). So I had to clone the node, remove the original, and add back the cloned node.

answered Apr 17 '13 at 05:19

Discombobulous

1,112
2
14
25

score 1 · Answer 4 · answered Oct 09 '15 at 19:24

1

You need to recreate your element.

function resetAnimation(jqNode) {
   var clone = jqNode.clone();
   jqNode.after( clone );
   jqNode.remove();
   jqNode[0] = clone[0];
}

answered Oct 09 '15 at 19:24

Denis535

3,407
4
25
36

It's a very useful method to reset animations also. Thanks. – sentenza Nov 11 '16 at 13:25

score 1 · Answer 5 · answered Jun 06 '21 at 20:55

1

with this simple code you do it ( you must use to triggers reflow .width() ):

$('#holder').removeClass('shader');
$('#holder').width();
$('#holder').addClass('shader');

answered Jun 06 '21 at 20:55

hossein naghneh

469
7
11

score 0 · Answer 6 · answered Apr 29 '15 at 15:14

0

Try using this just after you apply the animation - given that "e" is your animated element:

e.outerHTML = e.outerHTML;

answered Apr 29 '15 at 15:14

ElDoRado1239

3,938
2
16
13

score 0 · Answer 7 · answered Mar 28 '19 at 22:04

way to trigger a reflow:

  element.classList.remove("class");
  element.scrollBy(0, 0);
  element.classList.add("class");

works in strict mode! doesn't require a write operation on a read-only value! doesn't require a whole new function! one line and go! :)

score 0 · Answer 8 · answered Jun 04 '20 at 18:04

0

I'd be happy to hear any criticism with my method using requestAnimationFrame as I don't see anyone else using it:

element.classList.add("class");
window.requestAnimationFrame(() => element.classList.remove("class"));

answered Jun 04 '20 at 18:04

koral

525
7
23

score -1 · Answer 9 · answered Jun 10 '17 at 23:03

You definitely have to remove class that contains animation and then add it again. It should also work without .offsetWidth . It worked for me. So

$('#id').removeClass('animationClass');
$('#id').addClass('animationClass'); // starts animation again

should do the trick.

CSS animation doesn't restart when resetting class

9 Answers9

Linked

Related