​x
 
<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s; /* 针对 Safari 3.1 到 6.0 */
  transition: width 2s;
}
​
#myDIV:hover {
  width: 400px;
}
</style>
</head>
<body>
​
<p>请将鼠标悬停在下方的 div 元素上，等待过渡效果结束。</p>
​
<div id="myDIV"></div>
​
<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>
​
<script>
// 针对 Safari 3.1 到 6.0 的代码
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
​
// 标准语法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
​
function myFunction() {
  this.innerHTML = "transitionend event occured - The transition has completed";
  this.style.backgroundColor = "pink";
}
</script>
​
</body>
</html>
​