CSS3 tranisition 屬性
語法
transition: property duration timing-function delay
transition屬性是個復(fù)合屬性，她包括以下幾個子屬性：
-
transition-property：規(guī)定設(shè)置過渡效果的css屬性名稱 -
transition-duration：規(guī)定完成過渡效果需要多少秒或毫秒 -
transition-timing-function：指定過渡函數(shù)，規(guī)定速度效果的速度曲線 -
transition-delay：指定開始出現(xiàn)的延遲時間
默認值分別為：all 0 ease 0
當 transition-duration 時長為0，不會產(chǎn)生過渡效果
transition 改變多個樣式屬性
div{
transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;
}
子屬性
-
transition-property
transition-property: none |all |property;
值為none時，沒有屬性會獲得過渡效果，值為all時，所有屬性都將獲得過渡效果，值為指定的css屬性應(yīng)用過渡效果，多個屬性用逗號隔開
-
transition-duration
transition-duration：time;
該屬性主要用來設(shè)置一個屬性過渡到另一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱持續(xù)時間
-
transition-timing-function
transition-timing-function：linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
該屬性指的是過渡的“緩動函數(shù)”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況
div {
width: 100px;
height: 100px;
background-color: orange;
margin: 20px auto;
border-radius: 100%;
-webkit-transition-property: -webkit-border-radius;
transition-property: border-radius;
-webkit-transition-duration: 3s;
transition-duration: 3s;
-webkit-transition-timing-function：ease;
transition-timing-function：ease;
div:hover {
border-radius: 0px;
}
