CSS3動畫使網頁變得生動有趣，我也很喜歡沒事搞幾個動畫玩玩。
今天我們來看動畫最關鍵的部分，也是最簡單的部分，過渡
過渡概念：過渡是CSS3中具有顛覆性的一個特徵，可以實現元素不同狀態間的平滑過渡（補間動畫），經常用來製作動畫效果。
寫法：
單獨寫：需要過渡的屬性：transition-property:取值：all,width,height,color,.......
過度持續的時間：transition-duration: 單位為秒，如 1s
過渡時運動曲線：transition-timing-function: linear(線性)，ease(減速),ease-in(加速),ease-out(減速)，ease-in-out(先加速再減速)
過渡延遲的時間：transition-delay:單位為秒，如： 1s
當然我們通常會講幾個屬性和在一起來寫，例如：transition:all 12s linear 0s
下面請看例子：
其實關鍵的就一行代碼：transition: all 10s ease-in-out 0s;
這行代碼的意思就是id為demo的元素所有屬性均過渡，過渡時間10秒，過渡過程隨時間先變快在變慢，過渡延遲0秒。
特別要注意的是：
如果不用其他動畫，單獨寫過渡，需要配合其他觸發性動作，如鼠標懸浮。
以鼠標懸浮來舉例：元素的原本屬性（觸發性事件未發生前的屬性）為初始屬性，懸浮等觸發性事件發生後元素的屬性為最終屬性，即：我們要先設置好初始屬性和最終屬性，然後通過過渡（transition）來改變其變化的過程。
分享到:
閱讀更多 小閆故事 的文章
