CSS3过渡(transition)-圆球随鼠标点击而移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
#foo{
border-radius: 50px;
width: 50px;
height: 50px;
background-color: #c44;
position: absolute;
top:-100px;
left: -100px;
-webkit-transition:all 1s;//1S完成移动
}
</style>
</head>
<body>
<div id="foo"></div>
<script type="text/javascript">
var f=document.getElementById('foo');
document.addEventListener('click',function(ev){
f.style.left=(ev.clientX-25)+'px';
f.style.top=(ev.clientY-25)+'px';
},false);
</script>
</body>
</html>
另外，可对事件进行监听：
el.addEventListener("webkitTransitionEnd",updateTransition,true)；
