JSFiddle - React, Tailwind, and code Playground

by mikapon

HTML

<div class="ball"></div>
<a href="#" onclick="move()" style="position: absolute; bottom: 0;">move</a>

CSS

.ball {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 25px;
  top: 0;
  left: 0;
}

.ball.move {
  animation: 0.5s ease-in forwards up;
}

@keyframes up {
  from { left: inherit; }
  to   { left: 120px; }
}

JavaScript

const el = document.querySelector('.ball')
el.addEventListener('animationiteration', event => {
console.log(event)
  //event.target.style.animationPlayState = 'paused'
})
function move() {
	el.classList.toggle('move')
}