JSFiddle - React, Tailwind, and code Playground

by Bacher

HTML

<div id="r" class="round round_raise">
</div>

<button id="btn">
  CLICK
</button>

CSS

.round {
  width: 100px;
  height: 100px;
  background: red;
}

.round_raise {
  animation: raise-down 3s;
}

.round_reverse {
  animation: raise-down 3s reverse;
}


@keyframes raise-down {
  from {
    transform: translate3d(0, -100px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

JavaScript

document.getElementById('btn').addEventListener('click', () => {
	document.getElementById('r').classList.remove('round_raise');
 	document.getElementById('r').classList.add('round_reverse');
});