如何使用过渡属性（Transition）

1、代码应用。从代码来看这个transition 有着两个重要的参数。

div{width:200px;transition: width 3s;-moz-transition: width 3s; /* Firefox 4 */-webkit-transition: width 3s; /* Safari 和 Chrome */-o-transition: width 3s; /* Opera */}

2、从上一步的代码来看，这个浏览器支持情况也不一样的。-moz- 加在 firefox

-webkit-  加在 Safari

3、transition 的用法。它的默认值是 all 0 或者 ease 0

它的继承性 no ,它的版本 CSS3

4、java 用法  object.style.transition="width 2s"，从这个java 用法来看时间的参数是重要的。

5、语法。transition: property duration timing-function delay;  从语法里面也可以看出时间参数值的重要。

6、完整的style 流程。从这个完整的style流程中我们可以看见一个鼠标的 hover效果与 transition 代码一起发生作用！

<style> 

div

{

width:200px;

height:200px;

background:red;

transition:width 3s;

-moz-transition:width 3s; /* Firefox 4 */

-webkit-transition:width 3s; /* Safari and Chrome */

-o-transition:width 3s; /* Opera */

}

div:hover

{

width:400px;

}

</style>