CSS中簡單的動畫叫做 transition(轉變)。通常，當一個元素的樣式屬性值發生變化時，我們會立即看到頁面元素發生變化，也就是頁面元素從舊的屬性值立即變成新的屬性值的效果。Transition(轉變)能讓頁面元素不是立即的、而是慢慢的從一種狀態變成另外一種狀態，從而表現出一種動畫過程。
這些轉變效果可以用下列屬性來指定：
transition-property – 什么屬性將用動畫表現，例如, opacity。
transition-duration – 轉變過程持續時間。
transition-timing-function – 轉變時使用的調速函數(比如, linear、 ease-in 或自定義的 cubic bezier 函數)。
transition – 三種屬性的合體簡寫。
下面是一個例子：
div { opacity: 1; transition: opacity 1s linear; } div:hover { opacity: 0; }
這個三個Transition屬性中的每個屬性都支持多個參數值，參數值之間用逗號分隔，這樣能夠用一個樣式規則制定多種CSS屬性的變化。需要注意的是，三個Transition屬性中的多個參數值的順序一定要一致。
例如：
div { transition-property: opacity, left; transition-duration: 2s, 4s; }
上面的演示規則中，opacity的變化過程將會持續2秒，而left值的變化過程將會持續4秒。
還有一些更復雜的屬性也能表現出動畫效果，比如，CSS3中新出現的transform 屬性。下面就是一個使用 transform 和 transition 屬性實現簡單旋轉效果的例子：
<div style="transition: transform 3s ease-in" onclick="this.style.transform='rotate(360deg)'"> 點擊這個方塊，能讓它旋轉起來。 </div>
方塊的邊框(border)屬性也沒有做出動畫效果。下面是一個簡單的邊框變化演示，當你的鼠標在方塊上懸停移動時，可以看到方塊的邊框有慢慢變粗、變細以及顏色的變化。
需要注意的是，上面的利用鼠標懸停演示的動畫，當鼠標離開目標方塊后，動畫效果會反向發生，恢復到原狀。每次只要這些屬性值方式變化，動畫效果就會從屬性舊值到新值的簡單再次發生。
理解這種transition的關鍵點：
(1) 這些動畫是暗含的。你的JavaScript腳本和CSS都像往常一樣編寫。動畫只會簡單的發生在屬性值發生變化的時候。
(2) 不支持這些transition屬性的瀏覽器不會有任何動畫發生。你的JavaScript和css不會對正常的顯示帶來任何負面影響。
下面是transition屬性的分解介紹。所有的這些屬性都可以跟多個屬性值，用逗號分隔。
transition-property
允許值: none | all | <屬性名>
初始值: all
描述: 指明什么屬性將觸發動畫效果。none 值表示沒有變化。 all 值表示所有可以動畫演示的屬性都可以觸發動畫效果。否則，只有指定的屬性值方式變化才能觸發動畫效果。
transition-duration
允許值: <時間>
初始值: 0
描述: 指明動畫持續的時間長度。
transition-timing-function
允許值: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
初始值: ease
描述: 這個 transition-timing-function 屬性描述了動畫隨著時間運動的速度-時間函數。可以使用幾種常見的調速函數，也可以使用立方貝塞爾(cubic bezier)函數加控制點來自定義動畫的變換速度方式。對于立方貝塞爾曲線方程，我們需要兩個點的（X,Y）來控制曲線。點 P0 固定是 (0,0) 而 P3 固定是 (1,1)。有了這個四個點就能計算出一條立方貝塞爾曲線。
這些調速函數的意思是這樣的：
linear – 線性函數，返回值一個輸入值一樣的結果。
ease – 減緩函數, 是缺省值, 等同于 cubic-bezier(0.25, 0.1, 0.25, 1.0).
ease-in – 等同于 cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out – 等同于 cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out – 等同于 cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier – P0 和 P3 兩個點分別是 (0,0) 和 (1,1) 。再加上另外兩個點 (x1, y1, x2, y2) 就定義了一個立方貝塞爾曲線。
在將來的文章里我將會介紹更多的關于transitions（變換）的CSS動畫知識。比如：顯式動畫。
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
