baihuzisid
5/5/2018 - 7:48 AM

CSS3 过渡

过渡属性
下表列出了所有的过渡属性:

属性	       描述	                                        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; 
/* Safari */ 
-webkit-transition-property:width; 
-webkit-transition-duration:1s; 
-webkit-transition-timing-function:linear; 
-webkit-transition-delay:2s; 
}
实例
与上面的例子相同的过渡效果,但是使用了简写的 transition 属性:

div 
{ 
transition: width 1s linear 2s; 
/* Safari */ 
-webkit-transition:width 1s linear 2s; 
}