css3 过渡时长,Css3过渡（transition）

CSS3过渡是从元素从一种样式逐渐变成另一种的效果

若想实现功能 ，需要规定两项内容：

效果需要添加的css属性

规定效果的时长

如：应用于宽度属性的过渡效果，时长为 2 秒：

div

{

transition: width 2s;

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

-webkit-transition: width 2s; /* Safari 和 Chrome */

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

}

实例：想宽度 高度 和转换添加过渡效果：

div

{

width:100px;

height:100px;

background:yellow;

transition:width 2s, height 2s;

-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */

-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */

-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */

}

div:hover

{

width:200px;

height:200px;

transform:rotate(180deg);

-moz-transform:rotate(180deg); /* Firefox 4 */

-webkit-transform:rotate(180deg); /* Safari and Chrome */

-o-transform:rotate(180deg); /* Opera */

}

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

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

transition属性

属性

描述

transition

简写

transition-property

规定应用过渡的css名称

transition-duration

规定过渡花费的时间 默认为0

transition-timing-function

规定过渡的时间曲线 默认为0

transition-delay

过渡何时开始

实例：

div

{

width:100px;

height:100px;

background:yellow;

transition-property:width 1s linear 2s;

/* Firefox 4 */

-moz-transition:width 1s linear 2s;

/* Safari and Chrome */

-webkit-transition:width 1s linear 2s;

/* Opera */

-o-transition:width 1s linear 2s;

}

div:hover

{

width:200px;

}

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

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

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