JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<button onclick="start()">Start</button>
 <div class="box"></div>

CSS

.box {
  width: 50px;
  height: 50px;
  background: #000;
}
.active {
  animation: moveRight 1s linear forwards, moveDown 1s linear 1s forwards,
    moveLeft 1s linear 2s forwards;
}
@keyframes moveRight {
  100% {
    transform: translateX(100px);
  }
}
@keyframes moveDown {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translate(100px, 100px);
  }
}
 
@keyframes moveLeft {
  0% {
    transform: translate(100px, 100px);
  }
  100% {
    transform: translate(0, 100px);
  }
}

JavaScript

var el = document.querySelector(".box");

function start() {
	el.classList.toggle("active");
	el.getAnimations()
		.forEach((anim, i, arr) => {
		if (i == 1)
			anim.onfinish = () => console.log("animation end");
	});
}