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