CSS3變換入門

2020-03-24 16:15:23

字體：大中小

供稿：網(wǎng)友

譯自：CSS transitions 101
中文：CSS3變換入門
原作者：Jason Cranford Teague
譯者：神飛
請(qǐng)尊重版權(quán)，轉(zhuǎn)載請(qǐng)注明出處，多謝！
盡管人們期望在屏幕上有些改變，但是CSS和HTML對(duì)頁(yè)面中的交互能做的實(shí)在太少了，而那些還需要用代碼來實(shí)現(xiàn)。比如一個(gè)鏈接要么是這個(gè)顏色，要么是那個(gè)顏色；一個(gè)文本區(qū)域要么這么大，要么那么大；一張圖片要么是透明的要么是不透明的；它們是從一個(gè)狀態(tài)直接變到另一個(gè)狀態(tài)——中間并沒有過渡。這導(dǎo)致大部分網(wǎng)頁(yè)有些生硬，因?yàn)樵刂粫?huì)很死板的切換或改變。是的，你可以使用DHTML、jQuery或者自己編寫JS來實(shí)現(xiàn)過度，但是這需要更多的代碼來實(shí)現(xiàn)本應(yīng)該非常簡(jiǎn)單的功能。我們需要的是快速而簡(jiǎn)單的方法來給頁(yè)面添加簡(jiǎn)單的變換(transition)效果。在本文中，你會(huì)發(fā)現(xiàn)很有用的關(guān)于CSS變換(transition)以及如何使用它們的信息。幾個(gè)月之前，我就建議設(shè)計(jì)師應(yīng)該開始使用新的CSS 3 技術(shù)來實(shí)現(xiàn)一些它們渴求已久的基本的功能了——唯一的問題就是，這些技術(shù)沒有一個(gè)能在IE中可用，包括IE8。一些讀者認(rèn)為的那些技術(shù)將會(huì)有75%的用戶看不到的觀點(diǎn)是不靠譜的。對(duì)那些讀者我想說，“坐穩(wěn)了”，因?yàn)槲覍⒁蚰憬榻B另一個(gè)新的CSS屬性，它允許你通過簡(jiǎn)單的幾行代碼來為任意元素添加很酷的變換效果。CSS 變換剛剛在CSS 3中被引入，但是已經(jīng)被添加為webkit的擴(kuò)展了。也就是說，現(xiàn)在它們只能用于基于webkit內(nèi)核的瀏覽器，包括Apple Safari和Google Chrome。不過從Opera 10.5 pre-Alpha版本來看，Opera將在下一個(gè)10.5中支持CSS 3變換。所以要看到本文中提到的實(shí)際效果，強(qiáng)烈建議你使用Chrome或者Safari 4來查看本文。CSS變換從哪里來？變換曾經(jīng)只是Webkit的一部分，而且是Safari UI能做而其它瀏覽器不能實(shí)現(xiàn)的一些很酷的東東的基礎(chǔ)。但是W3C CSS工作組曾經(jīng)拒絕將變換添加到它的官方特性里面，一些成員堅(jiān)持認(rèn)為變換并非CSS屬性而通過腳本來處理會(huì)更好。(內(nèi)牛滿面啊，我前一段也有類似的觀點(diǎn)，也和高溫討論過，我認(rèn)為CSS動(dòng)畫超出了表現(xiàn)的范圍，交互的東西應(yīng)該有腳本來實(shí)現(xiàn)，不過后來在鬼哥的點(diǎn)撥下，才開始有了新的認(rèn)識(shí)——神飛)但是很多設(shè)計(jì)師和開發(fā)人員，包括我自己，堅(jiān)持認(rèn)為這確實(shí)是樣式——只是動(dòng)態(tài)樣式，而不是我們?nèi)粘Ｊ褂玫膫鹘y(tǒng)的靜態(tài)樣式。幸運(yùn)的是，關(guān)于動(dòng)態(tài)樣式的爭(zhēng)論已經(jīng)成為過去。去年三月份，來自Apple和Mozilla的代表們開始將CSS變換模塊添加到CSS 3特性里面，非常接近Apple已經(jīng)添加到webkit中的表現(xiàn)。關(guān)于設(shè)計(jì)增強(qiáng)的一個(gè)簡(jiǎn)要介紹在我們繼續(xù)之前，讓我強(qiáng)調(diào)一點(diǎn)：永遠(yuǎn)不要讓網(wǎng)站的功能依賴樣式，如果該樣式不是瀏覽器通用的話(也就是說，所有的常用瀏覽器都支持)。對(duì)錯(cuò)過的同學(xué)再一次強(qiáng)調(diào)：永遠(yuǎn)不要讓網(wǎng)站的功能依賴樣式，如果該樣式不是瀏覽器通用的話。這也就是說，你可以使用樣式，比如變換，作為設(shè)計(jì)增強(qiáng)以提高用戶體驗(yàn)——在不犧牲看不到它們的用戶的可用性的前提下。如果你不用CSS變換照樣能用而且用戶依然能夠完成他們的任務(wù)，就沒問題，你就可以使用CSS變換。首先，一些變換的想法 CSS變換將不會(huì)替代所有的DHTML，不過它會(huì)提供一些支持過渡的方法來提高您在瀏覽器中的設(shè)計(jì)。你需要到下載Apple Safari 3+ 或Google Chrome瀏覽器來查看這些變換效果。這兩個(gè)瀏覽器都支持Mac和PC系統(tǒng)。變換最常見的用法就是當(dāng)用戶的鼠標(biāo)懸放到元素上的時(shí)候?qū)⒃馗吡?無論是鏈接、表格、表單還是其它的什么元素)，變換是為頁(yè)面添加平滑的界面的非常棒的方法。運(yùn)行代碼框

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]變換、狀態(tài)與動(dòng)作但是請(qǐng)稍等一下。在深入了解變換之前，我們需要理解一個(gè)元素能變換的不同的狀態(tài)。狀態(tài)定義當(dāng)前頁(yè)面中相應(yīng)的元素如何與用戶進(jìn)行交互，它們?cè)贑SS中通過偽類來定義，比如當(dāng)用戶的鼠標(biāo)經(jīng)過一個(gè)元素的時(shí)候，那個(gè)元素就會(huì)被hover偽類控制。
所有元素的默認(rèn)狀態(tài)變換通過改變不同元素狀態(tài)之間的一個(gè)時(shí)間段內(nèi)的樣式來起作用。比如，一個(gè)元素的默認(rèn)狀態(tài)的顏色值將會(huì)在呈現(xiàn)hover狀態(tài)的色彩值之前逐漸顯示色盤中的中間顏色一個(gè)簡(jiǎn)單的變換讓我們假設(shè)一個(gè)簡(jiǎn)單的變換，在用戶的鼠標(biāo)經(jīng)過一個(gè)鏈接的時(shí)候，將顏色從一個(gè)變換成另外一個(gè)。與其它CSS屬性一樣，變換也是直接添加到要使用它的選擇器中。該屬性可以采用下面的4個(gè)值。CSS property：被變換的屬性(比如, color)。看一下下面的表格了解所有可以被變換的CSS屬性列表。Duration：變換持續(xù)的時(shí)間，通常以秒來計(jì)算(比如, .25s).Timing function：允許你控制持續(xù)的時(shí)間的計(jì)算方式。與其使用一個(gè)簡(jiǎn)單的線性計(jì)算，你可以使變換加速(漸入)或者減速(淡出)，或者甚至specify a beat or count (比如，linear). More on this later in the article.Delay：在動(dòng)作和變換開始之間等待多久，通常用秒來表示(比如, .1s)。如果你不想延遲，該值可省略。因?yàn)樽儞Q屬性始于Webkit擴(kuò)展，我們不得不同時(shí)使用transition 和-webkit-transition 屬性以向后兼容。讓我們首先提阿賈這這些屬性到:hover 偽類中：a:hover {
color: red;
-webkit-transition: color .25s linear;
transition: color .25s linear;
}那么現(xiàn)在，當(dāng)鼠標(biāo)經(jīng)過一個(gè)鏈接，不會(huì)直接從藍(lán)色跳轉(zhuǎn)到紅色，而是用四分之一秒的時(shí)間逐漸變換它們的中間顏色(過渡顏色)。當(dāng)然，我們也希望變換回到默認(rèn)的鏈接顏色，那么我們可以添加一個(gè)變換到:link (以及:visited)偽類上，并在它褪去之前添加一個(gè)簡(jiǎn)單的延遲(十分之一秒) ：a:link, a:visited {
color: blue;
-webkit-transition: color .25s linear .1s;
transition: color .25s linear .1s;
}添加多重變換因?yàn)橐粋€(gè)變換就是一個(gè)CSS屬性，如果你在同一個(gè)CSS規(guī)則中添加多個(gè)變換的實(shí)例，那么最后的那個(gè)將會(huì)覆蓋前面的，而不是添加它們。所以在下面的規(guī)則中，唯一的變換將是背景色彩：a:hover {
color: red;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear;
transition: color .25s linear;
transition: background-color .15s linear .1;
}當(dāng)然，這并不是說，不能添加多重變換——多重變換可以在同一個(gè)變換屬性定義中用逗號(hào)隔開：a:hover {
color: red;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear, background-color .15s linear .1s;
transition: color .25s linear, background-color .15s linear .1s;
}這條定義將產(chǎn)生色彩和背景色的雙重變換。什么可以被變換？幾乎所有的有色彩、大小或位置等組件的CSS屬性，包括許多新添加的CSS 3屬性，都可以應(yīng)用變換。一個(gè)值得注意的例外是box-shadow。來自W3C的變換的說明，這里是一個(gè)可以賦予變換的CSS屬性的列表，附帶轉(zhuǎn)變的對(duì)象，我也高亮了一些比較有用的屬性。
變換計(jì)時(shí)與延遲
使用變換，你可以改變變換的速率，在開始的時(shí)候較慢然后在結(jié)束的時(shí)候加速，反之亦然，或者之間的任何事情。CSS變換有5個(gè)計(jì)時(shí)的關(guān)鍵詞，同時(shí)也允許你自己定義你自己的計(jì)時(shí)曲線。名稱如何工作
cubic-bezier(x1, y1, x2, y2) X 和 Y 值在0到1之間，以定義用于Time function的貝塞爾曲線的形狀。
linear 均速
ease 逐漸慢下來
ease-in 加速(漸入)
ease-out 減速(淡出)
ease-in-out 加速然后減速全部變換？變換將很快成為所有網(wǎng)站的標(biāo)準(zhǔn)操作方式，從而增強(qiáng)用戶界面的體驗(yàn)。為了給你的整個(gè)網(wǎng)站添加一個(gè)普遍的變換，一個(gè)做法就是添加一個(gè)變換到全體選擇器，類似CSS reset。下面的代碼會(huì)給頁(yè)面中的所有元素添加一個(gè)默認(rèn)的變換，從而允許你保持一個(gè)統(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;
}一個(gè)反對(duì)全部變換，同時(shí)明確反對(duì)使用全體選擇器作為CSS reset的爭(zhēng)論是，將一個(gè)樣式用到頁(yè)面的所有元素會(huì)減緩頁(yè)面的渲染。然而，我并沒有發(fā)現(xiàn)任何有關(guān)與此的證據(jù)。有人知道嗎？OK，其實(shí)CSS 變換就這么簡(jiǎn)單，它并不難理解，而且你也不用些大量的JS腳本來實(shí)現(xiàn)它，這很方便實(shí)用，多做幾次練習(xí)，你就可以熟練的使用它了。譯注：本文原文題目為 CSS transitions 101，101這個(gè)數(shù)字比較不好理解，其實(shí)美國(guó)大學(xué)第一門課程通常編號(hào)為101，所以101一般表示入門、初級(jí)的意思。另外關(guān)于 transition 這個(gè)詞的翻譯，我之前是翻譯成“轉(zhuǎn)換”，但是這個(gè)翻譯很別扭，在twitter上和 @gaowhen、@ghostzhang、@ivane、@hiwanz、@cnjoel等人討論后，覺得翻譯成“變換”更合適一些，多謝各位。——神飛html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CssGaga教程-css合并與CSS優(yōu)化

下一篇：學(xué)習(xí)CSS的背景圖像屬性background