W3Schools 试用编辑器 - W3Schools 中文教程

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