css 過渡（transition）, 是 css3 規範的一部分, 用來控制 css 屬性的變化速率。 可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用 transition 後，將按乙個曲線速率變化。這個過程可以自定義。transition是乙個簡寫屬性,四個值(單獨使用均加transition-字首)的順序:
property
duration
timing-function
delay
過渡就是在一定時間內完成某屬性值的改變,所以,transition-duration一定要設定,因為它預設值為0;
要過渡的屬性值,只有被指定的屬性才會在過度時產生動畫效果,可以填all,all為所有可動畫屬性;
#demo #demo:hover
只會對width的改變產生動畫效果↓
可以選擇多個屬性的值;
#demo
使用簡寫時指定多個屬性:
#demo
使用子屬性時需要注意幾點:
#demo/*相當於
*/#demo
#demo/*相當於
*/#demo
設定過渡持續的時間,可以為秒或毫秒,本人理解為過渡就是通過設定的持續時間結合緩動函式計算相應的屬性值改變的曲線;
比如4秒內寬度從100px過渡到200px,簡單的分為4幀(假設) 125px-150px-175px-200px;原理應該與animation的from to 類似;
過渡持續2s
過渡持續4s
過渡持續8s
設定過渡動畫的曲線,這裡是w3school的示例,裡邊用到了是幾個常用的,瀏覽器裡內建的幾種動畫曲線,還可以通過cubic-bezier(n,n,n,n)來進行定製,n為0-1之間的值;
挺全的乙個緩動函式集合,預設不設定時,為ease,慢速開始,然後變快再慢速結束;
設定動畫開始前的等待時間(預設為0,無延遲);
滑鼠懸浮2s後拉伸
使用transition能使頁面看上去更富有動感,下面是乙個按鈕的簡單例子;
hover me
hover me
.demo-button .demo-button:before #transition-demo1:before #transition-demo1:hover:before #transition-demo2:before #transition-demo2:hover:before
結合transform做的按鈕,主要是用到了:before元素,實現這種效果預設時縮小為不可見,hover時還原元素大小,縮放x,y軸的改變實現了兩個不同的button;
本文如有不足或錯誤,還請指出.共同學習;
CSS3新特性總結
1.屬性選擇器 常用的簡單歸納下 attribute value 用於選取帶有指定屬性和值的元素。title w3school attribute value 包含指定詞彙的元素。後代選擇器 title hello attribute value 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整...
css3新特性總結
一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...
css3新特性總結
一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...