利用css3属性：transitionduration来做简单的动画

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 {
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 {
             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