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部分

 

　　

 

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和其他分著寫的過渡睡醒也存在覆蓋,後面覆蓋前面的