<style>
h1{font-size:16px;}
.test{position:absolute;left:8px;200px;height:100px;margin:0 5px;padding:10px;border:1px solid #ddd;background-color:#eee;color:#000;
-moz-transition-property:left;
-moz-transition-duration:.5s;
-moz-transition-timing-function:ease-in;
-webkit-transition-property:left;
-webkit-transition-duration:.5s;
-webkit-transition-timing-function:ease-in;
-o-transition-property:left;
-o-transition-duration:.5s;／／秒
／／-moz-transition-duration:300ms;毫秒
-o-transition-timing-function:ease-in;
transition-property:left;
transition-duration:.5s;
transition-timing-function:ease-in;
}
.test:hover{left:100px;}
</style>
</head>
<body>
<h1>请将鼠标移动到下面的矩形上：</h1>
<div class="test">矩形在0.5s内慢慢向右移动<br />transition-duration:.5s;</div>
</body>
</html>