JSFiddle - React, Tailwind, and code Playground

HTML

<button id="button"/>

CSS

#button {
  position: fixed;
  background-color: green;
  height: 20%;
  width: 20%;
  opacity: 0;
}

#button:active{
 transform: translateX(20px);
 /* animation-name: not_existing_animation; */
}

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */

.bounceInDown {
  animation-name: bounceInDown;
  opacity: 1!important;
}


.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

JavaScript

setTimeout( function(){
$("#button").addClass("animated bounceInDown");
}, 1000);