JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="element"></div>

CSS

/* CSS */
.element {
  width: 100px;
  height: 100px;
  background: red;
    
  opacity: 0.0;
  -webkit-transform: scale(0.95) translate3d(0,100%,0);
  -webkit-transition: -webkit-transform 400ms ease, opacity 400ms ease;
}

.element.active {
  opacity: 1.0;
  -webkit-transform: scale(1.0) translate3d(0,0,0);
}

.element.inactive {
  opacity: 0.0;
  -webkit-transform: scale(1) translate3d(0,0,0);
}

JavaScript

var active = function(){
  $('.element').removeClass('inactive').addClass('active');
};

var inactive = function(){
  $('.element').removeClass('active').addClass('inactive');
};

setTimeout(active, 1000);
setTimeout(inactive, 3000);