Triggering a CSS animation again with a JavaScript event

Question

I'm trying to trigger a CSS animation again with JavaScript. Tried a lot of tricks, nothing works.

Steps:

<canvas class="shake"> is added to document.body
shake animation works!
Press "Shake" button to re-add the CSS.
Animation does not get triggered again.

Code

https://jsbin.com/pasitic/edit?css,js,console,output

The code is really simple. I'm hoping that there is a really simple and decent solution out there. I'm using vanilla JavaScript.

Update

Solved and the example was updated with the working code.

Brian · Accepted Answer · 2016-09-16 16:39:56Z

1

Try this:

...
$btn.addEventListener("click", function(e) {
  e.preventDefault();
  console.log("clicked");

  $canvas.className = "shake"; // Doesn't trigger the animation!
});

$canvas.addEventListener("animationend", function(e) {
  $canvas.className = "";
});

...

It adds an event listener that removes the class name which triggers after the animation ends.

answered Sep 16, 2016 at 16:39

Brian

1,91317 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eilimint · Accepted Answer · 2016-09-16 16:35:37Z

0

If you remove a class and add it again the animation won't play.

You could wrap the add "shake" class in a setTimeout function with a tiny delay and the animation will work.

$canvas.className = "";

setTimeout(function(){ 
  $canvas.className = "shake";
}, 50);

Also you could use the following:

$canvas.classList.remove("shake");
void $canvas.offsetWidth;
$canvas.classList.add("shake");

The $canvas.offsetWidth; will trigger a reflow.

You can read more about it here: https://css-tricks.com/restart-css-animation/

answered Sep 16, 2016 at 16:35

Eilimint

3071 gold badge3 silver badges11 bronze badges

1 Comment

Șerban Ghiță Over a year ago

Thank you for this alternative solutions. I tested the setTimeout solution and it works. I don't want to trigger the reflow of my canvas element, but it's good to know that trick!

Kshitiz · Accepted Answer · 2016-09-16 16:39:48Z

0

Adding the timeout with some delay worked. I have added the delay equal to animation-duration but adding any amount of delay will work.

$btn.addEventListener("click", function(e) {
  e.preventDefault();
  console.log("clicked");
  $canvas.className = 'shake';
  setTimeout(function(){ $canvas.className = '';  }, 500);
});

answered Sep 16, 2016 at 16:39

Kshitiz

11 bronze badge

Collectives™ on Stack Overflow

Triggering a CSS animation again with a JavaScript event

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related