<div class="sample animated">Animate</div>
body {
  background-color: #a3d5d3;
  height: 200px
}

div {
  width: 100%;
  text-align: center;
  font-size: 30px;
  position: relative;
  top: 50%;
}
 $(function() {
  $('.sample').on('click', function() {
    if($(this).hasClass('bounceInUp')) {
      $(this).removeClass('bounceInUp');
      $(this).addClass('bounceInDown');
    } else {
      $(this).addClass('bounceInUp');
      $(this).removeClass('bounceInDown');
    }
  });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js