​x
 
<!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>
​
<div id="myDIV"></div>
​
<script>
var x = document.getElementById("myDIV");
​
// 针对 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>
​