JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<div id="teste"></div>

CSS

#teste {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 50px;
  height: 50px;
  background-color: red;
}

.anim1 {
  transform: translate3d(0, 50px, 0);
  transition: all .5s ease;
}

.anim2 {
  transform: translate3d(50px, 0, 0);
  transition: all .5s ease;
}

.anim3 {
  transform: translate3d(0, 0, 0);
  transition: all .5s ease;
}

JavaScript

function Animator() {
  var currentDelay = 0;
  this.animate = function(element, animationClassName, delay) {
    var realDelay = (currentDelay + delay) * 1000;    
    setTimeout(function() {
      element.className = animationClassName;
    }, realDelay);
    currentDelay += delay;
  }
}


var animator = new Animator();

animator.animate(document.getElementById("teste"), "anim1", .2);
animator.animate(document.getElementById("teste"), "anim2", 1);
animator.animate(document.getElementById("teste"), "anim3", 1);