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.

Answer 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>