JSFiddle - React, Tailwind, and code Playground

HTML

<button type=button>Play</button>
<div id=ball></div>

CSS

#ball {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: lightblue;
}

JavaScript

const effect = new KeyframeEffect(
  document.querySelector("#ball"), // Element to animate
  [ // Keyframes
    {transform: "translateY(0%)"}, 
    {transform: "translateY(100%)"}
  ], 
  {duration: 500, fill: "forwards"} // Keyframe settings
);

const animation = new Animation(effect, document.timeline);

document.querySelector("button").addEventListener("click", () => {
	animation.play();
});