CSS3中的Transition屬性詳解

2022-07-17 14:06:08 字數 3474 閱讀 1421

w3c標準中對css3的transition這是樣描述的:「css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠單擊、獲得焦點、被點選或對元素任何改變中觸發,並圓滑地以動畫效果改變css的屬性值。」

下面我們從最簡單的語法和屬性值開始一步一步來學習transition的具體使用:

語法:123

transition : [ || ||

|| [, [ ||

|| || ]]*

語法:1

transition-property : none | all | [ ] [ ',' ]*

transition-property是用來指定當元素其中乙個屬性改變時執行transition效果,其主要有以下幾個值:none(沒有屬 性改 變);all(所有屬性改變)這個也是其預設值;indent(元素屬性名);當其值為none時,transition馬上停止執行,當指定為all 時,則元素產生任何屬性值變化時都將執行transition效果,ident是可以指定元素的某乙個屬性值。其對應的型別如下:

1、color: 通過紅、綠、藍和透明度元件變換(每個數值單獨處理),如:background-color,border-color,color,outline-color等css屬性;

2、length:真實的數字,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position等屬性;

3、percentage:真實的數字,如:word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position等屬性;

4、integer離散步驟(整個數字),在真實的數字空間,以及使用floor()轉換為整數時發生,如:outline-offset,z-index等屬性;

5、number真實的(浮點型)數值,如:zoom,opacity,font-weight等屬性;

6、transform list:詳情請參閱:《css3 transform》。

7、rectangle:通過x、 y、 width和height**為數值)變換,如:crop;

8、visibility:離散步驟,在0到1數字範圍之內,0表示「隱藏」,1表示完全「顯示」,如:visibility;

9、shadow:作用於color、x、y、和blur(模糊)屬性,如:text-shadow;

10、gradient:通過每次停止時的位置和顏色進行變化。它們必須有相同的型別(放射狀的或是線性的)和相同的停止數值以便執行動畫,如:background-image;

11、paint server (svg):只支援下面的情況:從gradient到gradient以及color到color,然後工作與上面類似;

12、space-separated list of above:如果列表有相同的專案數值,則列表每一項按照上面的規則進行變化,否則無變化;

13、a shorthand property:如果縮寫的所有部分都可以實現動畫,則會像所有單個屬性變化一樣變化。

語法:1

transition-duration : [, ]*

transition-duration是用來指定元素 轉換過程的持續時間,取值:為數值,單位為s(秒),可以作用於所有元素,包括:before和:after偽元素。其預設值是0,也就是變換時是即時的。

語法:123

transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out |

cubic-bezier(, , , ) [, ease | linear | ease-in |

ease-out | ease-in-out | cubic-bezier(, , , )]*

取值:transition-timing-function的值允許你根據時間的推進去改變屬性值的變換速率,transition-timing-function有6個可能值:

1、ease:(逐漸變慢)預設值,ease函式等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0);

2、linear:(勻速),linear 函式等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0);

3、ease-in:(加速),ease-in 函式等同於貝塞爾曲線(0.42, 0, 1.0, 1.0);

4、ease-out:(減速),ease-out 函式等同於貝塞爾曲線(0, 0, 0.58, 1.0);

5、ease-in-out:(加速然後減速),ease-in-out 函式等同於貝塞爾曲線(0.42, 0, 0.58, 1.0);

6、cubic-bezier:(該值允許你去自定義乙個時間曲線), 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於麴線上點p1和點p2。所有值需在[0, 1]區域內,否則無效。

其是cubic-bezier為通過貝賽爾曲線來計算「轉換」過程中的屬性值,如下曲線所示,通過改變p1(x1, y1)和p2(x2, y2)的座標可以改變整個過程的output percentage。初始預設值為default。

其他幾個屬性的示意圖:

語法:1

transition-duration : [, ]*transition-delay : [, ]*

transition-delay是用來指定乙個動畫開始執行的時間,也就是說當改變元素屬性值後多長時間開始執行transition效果,取 值:為數值,單位為s(秒),它的使用和transition-duration極其相似,也可以作用於所有元素,包 括:before和:after偽元素。 預設大小是」0″,也就是變換立即執行,沒有延遲。

有時我們不只改變乙個css效果的屬性,而是想改變兩個或者多個css屬性的transition效果,那麼我們只要把幾個transition的 宣告串 在一起,用逗號(「,」)隔開,然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點:transition-delay與 transition-duration的值都是時間,所以要區分它們在連寫中的位置,一般瀏覽器會根據先後順序決定,第乙個可以解析為時間的怭值為 transition-duration第二個為transition-delay。如:12

3456

a }如果你想給元素執行所有transition效果的屬性,那麼我們還可以利用all屬性值來操作,此時他們共享同樣的延續時間以及速率變換方式,如:12

3456

a 綜合上述我們可以給transition乙個速記法:transition: 如下圖所示:

相對應的乙個示例**:12

3456

p

Css3中的背景

css3對背景作了很多改變,最明顯的是可以選擇多重背景,同時它也增加了四個新的屬性。多重背景 css3中,對乙個元素可以使用一張以上的背景。除了使用逗號將分開以外,其 與css2相同。第乙個宣告的定位在元素的頂部,接下來的層列於下,像這樣 該屬確定背景畫區,有以下幾種可能的屬性 background...

CSS3中的動畫

animation實現動畫主要由兩個部分組成 通過類似flash動畫的關鍵幀來宣告乙個動畫 在animation屬性中呼叫關鍵幀宣告的動畫實現乙個更為複雜的動畫效果 設定關鍵幀 keyframes spread 33 66 100 注意 寫相容的時候瀏覽器字首是放在 keyframes中間 例如 w...

CSS3中的屬性

讓邊框變成圓角 border radius 100px border radios 10px 20px 30px 40px transform rotate 45deg retate是順時針旋轉角度 transform translate 50px,100px 把元素從左側移動 50 畫素,從頂端移...