W3Schools 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>

​x
 
<!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>​<script>const div1 = document.getElementById("myDIV");​function myFunction() {  div1.style.animation = "mymove 4s 2";}​div1.addEventListener("animationstart", myStartFunction);div1.addEventListener("animationiteration", myRepeatFunction);div1.addEventListener("animationend", myEndFunction);​function myStartFunction() {  this.innerHTML = "The animation has started";  this.style.backgroundColor = "pink";}function myRepeatFunction() {  this.innerHTML = "The animation was played again";  this.style.backgroundColor = "lightblue";}function myEndFunction() {  this.innerHTML = "The animation has completed";  this.style.backgroundColor = "lightgray";}