|
transition(轉換)
一個涉及到CSS屬性的基本的轉換就是定義和移動一個元素從它的靜止狀態(tài)(比如，深藍色背景)到它的hover或者激活狀態(tài)(比如，淺藍色背景)。
轉換可以和變形同時使用(以及引發(fā)諸如:hover 或:focus事件)以創(chuàng)建一些動畫。淡出背景色彩，滑動一個元素以及讓一個對象旋轉都可以通過CSS轉換實現。
#nav a{ background-color:red; }
#nav a:hover, #nav a:focus{
background-color:blue;
/* 告訴轉換去應用到background-color 屬性(看起來像一個CSS 參數，不是嗎？ #foreshadowing)*/
-webkit-transition-property:background-color;
/* 讓它持續(xù)兩秒鐘*/
-webkit-transition-duration:2s;
}
轉換的一些參數
- transition-property
指定轉換的CSS屬性名稱，比如，上面的例子中，將轉換應用于background-color屬性。
- transition-duration
定義轉換花費的時間（從舊屬性換到新屬性花費的時間）
- transition-timing-function
可以理解為過度效果。指定轉換過程中的中間值�？梢杂胏ubic-bezier指定。當然有幾個常用的內置值：ease | linear | ease-in | ease-out | ease-in-out
- transition-delay
這個比較容易理解，就是轉換延遲的時間。時間可以為正整數、負整數和零，非零的時候必須設置單位是s(秒)或者ms(毫秒)，為負數的時候，轉換的動作會從該時間點開始顯示，之前的動作被截斷。
注：參數部分為翻譯時添加，原文中沒有。
瀏覽器支持
像transform屬性一樣酷，但是目前只有WebKit瀏覽器支持。-moz-transition已經在最近的nightly-build版本的Firefox 3.7中可用。你也可以添加-moz-transition到你的CSS中以實現將來的增強。甚至可以添加一個不用私有前綴的屬性，以防萬一。
出處：前端觀察
責任編輯：bluehearts
上一頁 你需要知道的CSS3動畫技術 [4] 下一頁 你需要知道的CSS3動畫技術 [6]
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 你需要知道的CSS3動畫技術 [5]
