php 在线预览编辑器,在线代码预览编辑器

div

{

width:100px;

height:100px;

background:yellow;

transition-property:width;

transition-duration:1s;

transition-timing-function:linear;

transition-delay:2s;

/* Firefox 4 */

-moz-transition-property:width;

-moz-transition-duration:1s;

-moz-transition-timing-function:linear;

-moz-transition-delay:2s;

/* Safari and Chrome */

-webkit-transition-property:width;

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear;

-webkit-transition-delay:2s;

/* Opera */

-o-transition-property:width;

-o-transition-duration:1s;

-o-transition-timing-function:linear;

-o-transition-delay:2s;

}

div:hover

{

width:200px;

}

请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。

注释：本例在 Internet Explorer 中无效。

注释：这个过渡效果会在开始之前等待两秒。