利用css3属性：transition-duration来做简单的动画
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;
} 然后只需要在页面中，插入一段对left赋值的脚本就可以了，即对终点left赋值，使其移动到left:300px的位置，脚本如下：
var test1 = document.getElementById('test1');
test1.style.left='300px';
ok，这样就实现了简单的水平移动。
接下来，我们还可以用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';这个只是很简单的一个应用，如果要用这个属性来做更多的应用，还需要自己再研究，看看别人的demo
