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>
