什么时候html的过渡版本,CSS3 过渡

元素上时：

div:hover

{

width:300px;

}

注释：当指针移出元素时，它会逐渐变回原来的样式。

2.多项改变

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

示例：

向宽度、高度和转换添加过渡效果：

div

{

transition: width 2s, height 2s, transform 2s;

-moz-transition: width 2s, height 2s, -moz-transform 2s;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s;

-o-transition: width 2s, height 2s,-o-transform 2s;

}

3.过渡属性

属性

描述

CSS

transition

简写属性，用于在一个属性中设置四个过渡属性。

3

transition-property

规定应用过渡的 CSS 属性的名称。

3

transition-duration

定义过渡效果花费的时间。默认是 0。

3

transition-timing-function

规定过渡效果的时间曲线。默认是 "ease"。

3

transition-delay

规定过渡效果何时开始。默认是 0。

3

下面的两个例子设置所有过渡属性：

实例

在一个例子中使用所有过渡属性：

div

{

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 和 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;

}

简写的 transition 实例

实例

与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：

div

{

transition: 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;

}

例子：

CSS3 过渡

.animated_div

{

width:65px;

height:40px;

background:#92B901;

color:#ffffff;

position:absolute;

font-weight:bold;

font:12px "微软雅黑", Verdana, Arial, Helvetica, sans-serif;

padding:20px 10px 0px 10px;

float:left;

margin:5px;

-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;

-webkit-border-radius:5px;

-o-transition-property:width,height,-o-transform,background,font-size,opacity;

-o-transition-duration:1s,1s,1s,1s,1s,1s;

-moz-transition-property:width,height,-o-transform,background,font-size,opacity;

-moz-transition-duration:1s,1s,1s,1s,1s,1s;

transition-property:width,height,transform,background,font-size,opacity;

transition-duration:1s,1s,1s,1s,1s,1s;

border-radius:5px;

opacity:0.4;

}

.animated_div:hover

{

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

opacity:1;

background:#1ec7e6;

width:90px;

height:60px;

font-size:16px;

}