css過渡

過渡transition是一個複合屬性

例子1

  .example{
            width: 200px;
            height: 100px;
            background-color: blanchedalmond; transition-duration: 3s; transition-property: all; transition-timing-function: ease; transition-delay: 0s;
        }
        .example:hover{
            width: 500px;
        }

屬性解析：

transition-duration:持續的時間，默認爲0，是必需值，可是不能爲0

transition-property:過渡的屬性,默認值爲all

transition-trming-function:過渡函數，默認值爲ease

transition-delay:過渡延遲時間，默認值爲0

 

過渡的屬性：

1）背景顏色 background-color

 .example4{
            width: 200px;
            height: 100px;
            background-color: blanchedalmond;
            /*表明持續時間爲1s,延遲時間爲2s*/
            transition:2s;
        }
        .example4:hover{ background-color: #5cb85c; width: 500px;
        }

2)  none:

3) all：全部的屬性

4) width

5)width,background（能夠寫多個屬性，能夠用；分隔開）

注意：IE9-不支持該屬性，safari3.1-六、IOS3.2-6.一、android2.1-4.3須要添加-webkit-前綴；而其他高版本瀏覽器支持標準寫法

例子2：

 .example2{
            width: 200px;
            height: 100px;
            background-color: blanchedalmond;
            /*表明持續時間爲2s*/
            transition: 2s;
        }
        .example2:hover{
            width: 500px;
        }

例子3

.example3{
            width: 200px;
            height: 100px;
            background-color: blanchedalmond;
            /*表明持續時間爲1s,延遲時間爲2s*/
            transition: 1s 2s;
        }
        .example3:hover{
            width: 500px;
        }

過渡的樣式：

不是全部的CSS樣式值均可以過渡，只有具備中間值的屬性才具有過渡效果

顏色: color background-color border-color outline-color
位置: backround-position left right top bottom
長度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
數字: opacity visibility z-index font-weight zoom
組合: text-shadow transform box-shadow clip
其餘: gradient

過分持續的時間：
該屬性的單位是秒s或者毫秒ms
該屬性的默認值爲0，可是0無效，必須得帶單位

過渡時間函數(transition-timing-function)：
 過渡時間函數用於定義過渡屬性隨時間變化的過渡速度變化的效果默認值是：ease取值：三種取值,分別是關鍵字，steps函數，bezier函數1）steps函數steps步進函數將過渡時間劃分爲大小相等的時間間隔來運行