介紹

新式的CSS3中就已經有包含動畫的可定義值，內容相當的完整。CSS動畫指的是使用以CSS定義為主的動畫效果，又可以分成以下兩類:

  • CSS3轉場/過渡(transitions): 主要以開始狀態、結束狀態與持續期間(duration)三種參數，以及可指定的漸變函數(transition timing function)，將DOM元素或網頁上的物件進行轉變。

  • CSS3動畫(animations): 又稱為關鍵影格(Keyframe)動畫，可以加入關鍵影格，提供許多動畫片段的組合。

以CSS定義為主的動畫相較於使用JavaScript程式為主的動畫有一些好處:

  • 簡單，對於一些簡單的動畫特效，不需要撰寫程式就可以製作出動畫。
  • 低消費，對於電腦資源的消耗非常低。
  • 最佳化，瀏覽器對於CSS動畫可以提供最佳化，動畫可以運作得相當順暢。

因此，在一些簡單的UI元件互動時、不需要太多互動性的廣告看板，亦或是進場或退場的區塊特效，都是使用CSS定義的動畫就可以達成。

CSS3轉場與CSS3動畫的"相同"之處

  • 都是使用CSS定義，然後監聽DOM元素的改變作出動畫效果
  • 都可以設定漸變函數(transition timing function)，控制動畫的運動(效果展現)的曲線
  • 都可以設定持續期間(duration)，控制動畫持續的時間
  • 都有對應的event(事件)，可以送出動畫的狀態，可讓JavaScript再加以監聽或控制(可程式化)
  • 都可以用視覺化方式看到CSS屬性正在改變的狀態

CSS3轉場與CSS3動畫的"不同"之處

觸發(Trigger)方式

轉場(transitions)觸發使用:hover僞(pseudo)類別為最經常使用，其他可觸發的還有:active、:focus、:checked等等，另一種方式是使用JavaScript語言動態加入或移除CSS類別，更多範例可以參考這一篇範例。

動畫(animations)不需要觸發，當你定義好後，頁面一載入就會開始進行動畫。

循環/重覆播放(Looping)

轉場(transitions)沒有指定循環播放的屬性可用。

動畫(animations)有animation-iteration-count屬性可指定循環播放的次數，或是用"infinite"指定為不停地重覆播放。

定義關鍵影格(Keyframes)/中途點

轉場(transitions)沒有這特性。動畫的撥放就是從開始到結束。

動畫(animations)可以額外定義關鍵影格(Keyframes)，可以製作更複雜的動畫效果。

註: 有一個常會搞混的transform的CSS的新屬性，它可以把網頁上的物件或元素進行變形、翻轉或2d與3d的效果，它並不是與動畫有關的屬性，你可以把它當成是類似字體顏色大小、透明度(opacity)的屬性。也可以搭配CSS動畫來使用。

搭配JavaScript互動的混合作法

轉場(transitions)很容易可以搭配JavaScript程式作額外的互動應用。

動畫(animations)比較不容易，但仍然是可以搭配JavaScript使用。

瀏覽器的相容性

CSS3轉場(transitions)的相容性，根據Can I use網站的資料，在目前的9成以上的新版本瀏覽器都可以支援。比較會有問題的是舊版的IE9以下的版本無法支援。

CSS3動畫(animations)的相容性，根據Can I use網站的資料，與CSS3轉場(transitions)的相容性情況類似，在IE9以下無法使用，要特別注意的是在一些舊版本的Android 3以下，只有提供部份的支援。

results matching ""

    No results matching ""