transition-duration是屬於css3的屬性，用來指定對象過渡的持續時間。
爲了兼容不同的瀏覽器，需要加上相應的前綴，有以下幾種寫法，我們設定持續時間爲3秒：
selector{
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-o-transition-duration: 3s;
-ms-transition-duration: 3s;
transition-duration: 3s;
}首先，我們來做一個簡單的移動。
放一個黃色的div在頁面中，爲了方便其移動，id爲“test1”，設置其position爲absolute，初始left值爲0即起始的距離，當然最重要的transition-duration屬性不要忘記咯，css如下：
div {
width:300px;
height:200px;
position:absolute;
left:0;
background:yellow;
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-o-transition-duration: 3s;
-ms-transition-duration: 3s;
transition-duration: 3s;
}
var test1 = document.getElementById('test1');
test1.style.left='300px';
接下來，我們還可以用css3中的transfrom來做一些其他的動畫，比如鼠標hover的時候，div傾斜到某個角度。
代碼如下：
<!DOCTYPE html>
<html scrollbar="no">
<head>
<title>transtion demo</title>
<style type="text/css">
.animate {
width: 300px;
height: 200px;
position: absolute;
text-align: center;
}
.test1 {
background: yellow;
-webkit-transition-duration: 3s;
}
.test2 {
top: 400px;
background: green;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
-webkit-transition-duration: 3s;
}
.test3 {
top: 800px;
background: #000;
-webkit-transition-duration: 3s;
}
.test3:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
</style>
</head>
<body>
<div class="animate test1" id="test1">test1</div>
<div class="animate test2" id="test2">test2</div>
<div class="animate test3" id="test3">test3</div>
<script type="text/javascript">
var a = document.getElementById('test1');
a.style.left = '300px';
var b = document.getElementById('test2');
b.style.WebkitTransform = 'rotate(40deg)';
// a.style['-webkit-transition-duration'] = '3s';
// a.style['transition-duration'] = '3s';
</script>
</body>
</html>最後，有個需要注意的是，如果通過javascript來設置transition-duration，原生的javascript可以這樣用：
element.style['-webkit-transition-duration'] = '3s';
