Triggering CSS3 Keyframes with javascript multiple times

Question

I am triggering CSS3 Keyframes with javascript but its working for with first call after that any call to that function doesn't animate my div.

Here the Javascript code

function animateShare (imgSrc){            
    var share = document.getElementById("shareTools");
    share.style.animation = "testAnimate 1s ease-in-out 0s"
    //shareTools.style.animationPlayState = "running";
}

Sample of the issue (Click red box to preview)

var box = document.getElementById("box");
function animateBox(){
    box.style.animation = "box 1s ease-in-out 0s";
  }

#box{
  background:red;
  width:100px;
  height:100px;
  }

@keyframes box {
    50%{width:300px;}
  }

<div id='box' onclick='animateBox()'><div>

JSFIDDLE

I want it to animate everytime i call this function.

can you please make a fiddle to check this out

Anas Omar
– Anas Omar

2016-01-31 13:09:44 +00:00
Commented Jan 31, 2016 at 13:09 — Anas Omar
– Anas Omar, Commented Jan 31, 2016 at 13:09
css-tricks.com/restart-css-animation

C3roe
– C3roe

2016-01-31 14:17:14 +00:00
Commented Jan 31, 2016 at 14:17 — C3roe
– C3roe, Commented Jan 31, 2016 at 14:17

Everettss · Accepted Answer · 2016-01-31 13:57:49Z

1

You can use well known hack: destroy and create element to reset animation.

var box = document.getElementById("box");
function animateBox(){

    //destroy and create hack
    document.body.removeChild(box);
    document.body.appendChild(box);

    box.style.animation = "box 1s ease-in-out 0s";
  }

#box{
  background:red;
  width:100px;
  height:100px;
  }

@keyframes box {
    50%{width:300px;}
  }

<div id='box' onclick='animateBox()'><div>

answered Jan 31, 2016 at 13:57

Everettss

16.2k9 gold badges78 silver badges106 bronze badges

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

Comments

Alex Bass · Accepted Answer · 2016-01-31 14:15:33Z

1

You can reset the animation by just removing the animation property from the styles of the element after the animation has complete - removing the element is unnecessary. In my example, I set the duration in JS, but you could just as easily add an animationend hook to keep it simpler.

JSFiddle

var duration = 1000;
document.getElementById('box').addEventListener('click', function onClick(ev) {
  var el = this;
  el.style.animation = 'box ' + (duration / 1000 + 's') + ' ease-in-out';
  setTimeout(function() {
    el.style.animation = ''
  }, duration);
});

#box {
  background: red;
  width: 100px;
  height: 100px;
}
@keyframes box {
  50% {
    width: 300px;
  }
}

<div id='box'><div>

answered Jan 31, 2016 at 14:15

Alex Bass

2,4621 gold badge16 silver badges16 bronze badges

Comments

score 1 · Accepted Answer · 2021-08-27 21:49:22Z

In case someone is still interested by this there is another trick that works:

Changing the dataset value to something it has never been, and then use a css matching on that data.

I used this technique when animating the collapsing/uncollapsing of a menu, which of course can happen multiple times. Here's how I did it:

#menu[data-closed^="1"]{
    animation:menu_closing;
}
#menu[data-closed^="0"]{
    animation:menu_opening;
}

So the animation is based on the first character of the dataset (1 or 0).

Then in the click event that wants to close/open the menu:

var closed = menu_ele.dataset.closed // closed right now
    ? parseInt( menu_ele.dataset.closed.substr(0,1) )
    : 0; // assuming menu is initialized open
var counter = menu_ele.dataset.closed // nb of times the menu was closed or open
    ? parseInt( menu_ele.dataset.closed.substr(1) )
    : 0;
menu_ele.dataset.closed = ''+(1-closed)+(counter+1);

This way the "closed" dataset variable changes like this at every click:

11 (closing for the first time)
02 (reopening for the first time)
13
04
15
06
...

The first digit indicates whether it is currently closed, while all the rest is a counter to make the value new every time.

Radosław Miernik · Accepted Answer · 2016-01-31 13:10:21Z

0

Think about your code - after first call it does nothing, becouse it already changed animation property of that element.

According to this CSS-Tricks article:

function animateShare (imgSrc){            
    var share = document.getElementById("shareTools");
    share.style.animation = "testAnimate 1s ease-in-out 0s";
    shareTools.style.animationPlayState = "paused";
    shareTools.style.animationPlayState = "running";
}

answered Jan 31, 2016 at 13:10

Radosław Miernik

4,0948 gold badges36 silver badges39 bronze badges

Comments

Ujjwal Kumar Gupta · Accepted Answer · 2016-01-31 14:07:15Z

0

add this code in the body section after the element for which the animation is being played-

<script>
document.getElementById('shareTools').addEventListener("animationend", function () {

        this.removeAttribute("style");
    })

</script>

or if you dont want to remove style attribute ,because you have other css than animation then create a class and add class dynimacally and remove it as above code.

answered Jan 31, 2016 at 14:07

Ujjwal Kumar Gupta

2,3961 gold badge25 silver badges34 bronze badges

Collectives™ on Stack Overflow

Triggering CSS3 Keyframes with javascript multiple times

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related