譯自： CSS transitions 101
中文： CSS3變換入門
原作者： Jason Cranford Teague
譯者：神飛
請尊重版權，轉載請註明出處，多謝！
儘管人們期望在螢幕上有些改變，但是CSS和HTML對頁面中的互動能做的實在太少了，而那些還需要用程式碼來實現。
例如一個連結要嘛是這個顏色，要嘛是那個顏色；一個文字區域要嘛這麼大，要嘛那麼大；一張圖片要嘛是透明的要嘛是不透明的；它們是從一個狀態直接變到另一個狀態──中間並沒有過渡。
這導致大部分網頁有些生硬，因為元素只會很死板的切換或改變。
是的，你可以使用DHTML、jQuery或自己編寫JS來實現過度，但這需要更多的程式碼來實現本來應該非常簡單的功能。
我們需要的是快速而簡單的方法來為頁面添加簡單的變換(transition)效果。在本文中，你會發現很有用的關於CSS變換(transition)以及如何使用它們的資訊。
幾個月之前，我就建議設計師應該開始使用新的CSS 3 技術來實現一些它們渴求已久的基本的功能了——唯一的問題就是，這些技術沒有一個能在IE中可用，包括IE8。
有些讀者認為的那些技術將會有75%的使用者看不到的觀點是不可靠的。
對那些讀者我想說，“坐穩了”，因為我將要向你介紹另一個新的CSS屬性，它允許你通過簡單的幾行代碼來為任意元素添加很酷的變換效果。
CSS 變換剛剛在CSS 3中被引入，但已經被加入為webkit的擴充了。也就是說，現在它們只能用於基於webkit核心的瀏覽器，包括Apple Safari和Google Chrome。不過從Opera 10.5 pre-Alpha版本來看，Opera將在下一個10.5中支援CSS 3變換。所以要看到本文中提到的實際效果，強烈建議你使用Chrome或Safari 4來查看本文。
CSS變換從哪裡來？變換曾經只是Webkit的一部分，而且是Safari UI能做而其它瀏覽器不能實現的一些很酷的東東的基礎。
但是W3C CSS工作小組曾經拒絕將變換添加到它的官方特性裡面，一些成員堅持認為變換並非CSS屬性而透過腳本來處理會更好。 (內牛滿面啊，我前一段也有類似的觀點，也和高溫討論過，我認為CSS動畫超出了表現的範圍，交互的東西應該有腳本來實現，不過後來在鬼哥的點撥下，才開始有了新的認識－神飛)
但許多設計師和開發人員，包括我自己，堅持認為這確實是樣式——只是動態樣式，而不是我們日常使用的傳統的靜態樣式。
幸運的是，關於動態樣式的爭論已經成為過去。去年三月份，來自Apple和Mozilla的代表們開始將CSS變換模組加入CSS 3特性裡面，非常接近Apple已經加入webkit中的表現。
關於設計增強的一個簡單介紹在我們繼續之前，讓我強調一點：永遠不要讓網站的功能依賴樣式，如果該樣式不是瀏覽器通用的話(也就是說，所有的常用瀏覽器都支持)。
對錯過的同學再一次強調：永遠不要讓網站的功能依賴樣式，如果該樣式不是瀏覽器通用的話。
這也就是說，你可以使用樣式，例如變換，作為設計增強以提高用戶體驗——在不犧牲看不到它們的用戶的可用性的前提下。如果你不用CSS變換照樣能用而且使用者依然能夠完成他們的任務，就沒問題，你就可以使用CSS變換。