Animate.css:CSS 動畫十分鐘快速上手

過去我們在處理 CSS3 的動畫時,需要去了解 @keyframes 的使用方式,常常為了一個動畫效果的呈現,要在 CSS3 底下做了許多的嘗試才找到自己滿意的設定,這其實挺花時間的。因此,有人就想說:何不先把常用的動畫預先編寫完成,以後需要這些效果的時候就可以直接調用,這樣豈不省事又方便。這個有趣的想法由設計師 Daniel Eden 實現了,他將網頁或 UI 常用的動態效果,如:淡入淡出、翻頁、旋轉、上下左右的位移、變形等常用的動態效果集結成 Animate.css。這些效果如果都自己寫的話,光用測試個別效果的滑順度就知道是個吃力不討好的大工程,作者不但完成了,而且還以 MIT License 的方式免費釋放出來給大家使用。鄉親們,有沒有啾甘心 🙂

簡單的教學

首先,請先下載 Animate.css 並解壓縮。接著將 animate.css 寫進 head 中。

<link rel="stylesheet" type="text/css" href="animate.css">

使用上分兩種方式:

  1. 透過 Animate.css 內建的 class animated 來喚出動畫。這個方法比較簡單,但互動會比較死板。適合使用在頁面載入後就需要立即且反覆執行的情況,例如一段閃爍的提醒文字。
  2. 使用 Javascript 來觸發動畫效果。這種方式做出來的互動效果會比較豐富,可以根據使用者的行為觸發相對應的動畫,但技術難度比較高。

一、使用 class 喚出 Animate.css 動畫

首先,在網頁 body 的任意位置放置要跑的動畫內容,並為它增加相關的 class。
以閃爍的效果為例:預設的 class 的名稱是 flash,你也可以到 Animate.css 的範例網站上查詢到更多的 class 名稱。

<p class="flash">文字閃來閃去</p>

其中,關鍵字 flash 是 Animate.css 定義好的效果;完成後我們打開瀏覽器,你會發現動畫效果並沒有呈現出來,那是因為我們還沒有喚醒它。
因此,我們再回到編輯器裡,為 flash 另增一組 animated 的 class,內容如下:

<p class="animated flash">文字閃來閃去</p>

完成存檔後,我們開啟瀏覽器,畫面上的文字一閃一滅後就結束。
如果你要讓動畫反覆不斷的執行,需要增加 infinite 的 class。
範例如下:

<p class="animated infinite flash">文字閃來閃去</p>

二、使用 Javascript 觸發 Animate.css 動畫

這部分需要透過 Javascript,為了避免篇幅太長,到開始討論 WOW.js 的時候再一起介紹。先醬子 🙂

4 Comments

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料