JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<button>Start Animation!</button>

CSS

div.box {
  width: 200px;
  margin: 20px auto;
  height: 30px;
  background: lightblue;
}
button {
  display: block;
  margin: auto;
}
.animation {
   animation: get .6s cubic-bezier(0.85, 0.01, 0.58, 1) forwards;
}
@keyframes get {
  100% { transform: translateX(-200px); }
}

JavaScript

var btn = document.querySelector('button');

btn.addEventListener('click' , anim);

function anim(e){
	var box = document.querySelectorAll('.box');
  console.log(box);
  for ( i = 0 ; i < box.length ; i++ ){
  		box[i].classList.add("animation");
  		box[i].style.animationDelay = `.${i}s`;
  }
}