CSS3過渡詳解-遁地龍卷風

0.環境準備

　　（1）過渡需要瀏覽器的支持，使用這些屬性要加上瀏覽器廠商的首碼，我用的chrome49已經不需要首碼了，

　　-o- Opera

　　-webkit- Safari、Chrome

　　-moz- Firefox

　　-ms- IE

　　(2) css

　　p

　　{

　　　　height:15px;/*類似於高度這種屬性,必須明確指定值*/

　　}

　　p:hover/*初始p:hover*/

　　{

　　　　height:100px;

　　}

　　(3)html文件body部分

　　<p></p>

1.快速使用

　　將下麵屬性加入初始p:hover

　　transition: background 2s linear 1s,height 1s linear 1s;

2.詳解

　　(1)分別指定、屬性詳解

　　將下麵屬性加入初始p:hover

         transition-property:height,background-color;

         transition-duration:1s,2s;

         transition-timing-function:linear;

         transition-delay:1000ms,1s;

　　transition-property 指定需要變化的屬性

　　不建議寫成all,規則很難捉摸

transition-duration  height從執行到結束是1s,background-color從執行到結束是2s,height變化結束後,background-color變化結束還剩1s

 只寫一個值,則所有屬性應用這個值,除此之外,請讓transition-duration值的個數等於transition-duration值的個數

transition-timing-function:linear;變化的規律,這裡請自行查找

 只寫一個值,則所有屬性應用這個值,除此之外,請讓transition-timing-function值的個數等於transition-property值的個數

transition-delay:1000ms,1s;height 1s後開始變化,這裡background-color和height同時開始變化

 只寫一個值,則所有屬性應用這個值,除此之外,請讓transition-delay值的個數等於transition-property 值的個數

這些屬性只能出現一次，否則後面的覆蓋前面的

(2)綜合使用

將下麵屬性加入初始p:hover

transition: background 2s linear 1s,height 1s linear 1s;

<transition-property><transition-duration><transition-timing-function><transition-delay>

<>可選參數,請全寫

這些屬性只能出現一次，否則後面的覆蓋前面的

*transition和其他分著寫的過渡睡醒也存在覆蓋,後面覆蓋前面的