利用css3属性：transition-duration来做简单的动画

来源：互联网发布：淘宝买眼镜靠谱吗编辑：程序博客网时间：2024/05/23 19:18

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