css3之transition

transition属性是一个速记属性有四个属性：

 transition-property(过渡-属性)：指定CSS属性的name，transition效果

 transition-duration(过渡-持续时间)：transition效果需要指定多少秒或毫秒才能完成

 transition-timing-function(过渡-定时（校时）-函数)：指定transition效果的转速曲线

 transition-delay（过渡-延迟）：定义transition效果开始的时候

transition-property属性

可写可不写

transition-property: none|all|property;

none:没有属性会获得过渡效果。

all:所有属性都将获得过渡效果。

property:特定的属性定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-timing-function属性

值	描述
linear（线性）	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速-->变快-->慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)（立方体-贝塞尔）	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

如下贴上自己写的代码：

<div class="main"></div>  

.main{  
	position: relative;  
	margin: 0 auto;  
	height:45px;  
	width: 300px;  
	background-color:lightgray;  
	transition:all 1s cubic-bezier(0,0,1,1) 0s;  
}  
.main:hover{  
	height:100px;  
	width:200px;
	background-color:#ff5722b8;
	border-radius:20px;
} 

注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。