How can I add multiple time animate css class on click event in js?

Question

when i click the button box animated properly.Its working only on time, second time its not working. how can i manage this? so i want to animate this when i click the button not once.

function myFunction() {
  document.getElementById("box").classList.add('animated', 'bounceIn');
}

#box {
  background: red;
  height: 60px;
  width: 60px;
  margin-bottom: 20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div class="container">
  <div class="row">
    <div id="box"></div>
  </div>
</div>
<div class="container">
  <div class="row">
    <button class="btn btn-sm btn btn-primary" onclick="myFunction()">click to animate</button>
  </div>
</div>

Answer 1

You need to remove this class when animation is finished

function myFunction() {
    document.getElementById("box").classList.add('animated','bounceIn');
  setTimeout(function() {
    document.getElementById("box").classList.remove('animated','bounceIn');
  }, 100)
}

#box{
  background: red;
  height:60px;
  width:60px;
  margin-bottom:20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div class="container">
  <div class="row">
    <div id="box"></div>
  </div>
</div>
<div class="container">
  <div class="row">
<button class="btn btn-sm btn btn-primary" onclick="myFunction()">click to animate</button>
  </div>
</div>

https://codepen.io/anon/pen/QrwWMO

Or you can use pure css, no need to use javascript

#box{
  background: red;
  height:60px;
  width:60px;
  margin-bottom:20px;
}

button:active + #box{
  -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
      animation-name: bounceIn;
      animation-duration: .75s;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div class="container">
  <div class="row">
<!--     <div id="box"></div> -->
  </div>
</div>
<div class="container">
  <div class="row">
<button class="btn btn-sm btn btn-primary" >click to animate</button>
    <div id="box"></div>
  </div>
</div>