如何使用过渡属性（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>