W3School TIY 亲自试一试！

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
  margin: 25px;
  width: 550px;
  height: 100px;
  background: orange;
  position: relative;
  font-size: 25px;
  -webkit-animation-name: mymove;  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 5s;  /* Chrome, Safari, Opera */
  animation-name: mymove;
  animation-duration: 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}
</style>
</head>
<body>

<p>本例使用 addEventListener() 方法将 "animationstart" 事件附加到 DIV 元素。</p>

<p>animationName 属性返回此动画中使用的动画名称：</p>

<p><b>注释：</b>IE9 及更早版本不支持 animationName 属性。</p>

// 针对 Chrome、Safari 和 Opera 的代码
x.addEventListener("webkitAnimationStart", myStartFunction);

// 标准语法
x.addEventListener("animationstart", myStartFunction);

function myStartFunction(event) {
  this.innerHTML = "The animation-name is: " + event.animationName;
}
</script>

</body>
</html>

W3School TIY Editor