zig Tryit Editor

<!DOCTYPE html>
<html>
<style> 
#myDIV {
  width: 100%;
  height: 100px;
  background: orange;
  position: relative;
  font-size: 18px;
  padding:16px;
}
@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}
</style>

<body>
<h1>HTML DOM Events</h1>
<h2>The animationstart, animationiteration and animationend Events</h2>

<div id="myDIV" onclick="myFunction()">Click me to start the animation.</div>

function myFunction() {
    div1.style.animation = "mymove 4s 2";
  }

div1.addEventListener("animationstart", myStartFunction);
  div1.addEventListener("animationiteration", myRepeatFunction);
  div1.addEventListener("animationend", myEndFunction);

</body>

</html>