|
變換計時與延遲
使用變換，你可以改變變換的速率，在開始的時候較慢然后在結(jié)束的時候加速，反之亦然，或者之間的任何事情。CSS變換有5個計時的關(guān)鍵詞，同時也允許你自己定義你自己的計時曲線。
| 名稱 |
如何工作 |
| cubic-bezier(x1, y1, x2, y2) |
X 和 Y 值在0到1之間，以定義用于Time function的貝塞爾曲線的形狀。 |
| linear |
均速 |
| ease |
逐漸慢下來 |
| ease-in |
加速(漸入) |
| ease-out |
減速(淡出) |
| ease-in-out |
加速然后減速 |
全部變換？
變換將很快成為所有網(wǎng)站的標準操作方式，從而增強用戶界面的體驗。
為了給你的整個網(wǎng)站添加一個普遍的變換，一個做法就是添加一個變換到全體選擇器，類似CSS reset。下面的代碼會給頁面中的所有元素添加一個默認的變換，從而允許你保持一個統(tǒng)一的變換效果：
*:link, *:visited, *:hover, *:active, *:focus {
-webkit-transition:
color .25s linear,
background-color .25s linear,
border-color .25s linear;
transition:
color .25s linear,
background-color .25s linear,
border-color .25s linear;
}
一個反對全部變換，同時明確反對使用全體選擇器作為CSS reset的爭論是，將一個樣式用到頁面的所有元素會減緩頁面的渲染。然而，我并沒有發(fā)現(xiàn)任何有關(guān)與此的證據(jù)。有人知道嗎？
OK，其實CSS 變換就這么簡單，它并不難理解，而且你也不用些大量的JS腳本來實現(xiàn)它，這很方便實用，多做幾次練習(xí)，你就可以熟練的使用它了。
譯注：本文原文題目為 CSS transitions 101，101這個數(shù)字比較不好理解，其實美國大學(xué)第一門課程通常編號為101，所以101一般表示入門、初級的意思。另外關(guān)于 transition 這個詞的翻譯，我之前是翻譯成“轉(zhuǎn)換”，但是這個翻譯很別扭，在twitter上和 @gaowhen、@ghostzhang、@ivane、@hiwanz、@cnjoel等人討論后，覺得翻譯成“變換”更合適一些，多謝各位�！耧w
本文鏈接：http://www.95time.cn/tech/web/2010/7373.asp 
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 CSS3變換入門 [4] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 CSS3變換入門 [5]
