都給我動起來! Animate.css 分享

前言

覺得網頁呆板無趣嗎?
覺得網頁互動性不佳嗎?
嘗試為你網頁中的元素增添一點動感吧!
但是要寫 CSS Animations 又好麻煩，且我又是設計苦手怎麼辦?

不用擔心!
懶人救星! Animate.css 內建了 77 種動畫效果，使用簡單的 class 屬性讓你的網頁互動性更高，擁有更好的使用者體驗。

Animate.css

效果展示

實作

第一步就是先引入 CSS 文件，接著新增一個我們想讓它動的元素，程式碼如下。

如果想套用 Animate.css 的屬性，那就要在元素的 class 裡加上 animated ，接著找一個你想要的效果，一樣把他加到 class 裡，這邊以 heartBeat 為例，如此一來你應該可以看到我們的元素在動了，但如果你覺得動一次不夠，想要讓他一直跳動的話就需要再加上 infinite ，如此一來這個元素就會一直有動畫效果了，程式碼如下。

Delay Class

在 class 屬性上添加 delay-ns 的話可以延遲 n 秒後才開始執行動畫。沒有設定的話預設是 1 秒後，但是就算是使用 Delay Class 最多也只能延遲 5 秒，如果要更多延遲的話需要自行設定 CSS。

Slow, Slower, Fast, and Faster Class

設定單次動畫的秒數，預設為一秒一個循環。

程式碼如下。

後記

這次文章的長度並不長，因為 Animate.css 的設定並不繁雜，所以很快就可以介紹完，但他能應用的地方卻是很廣的，各位看倌可以自行玩玩看他裡面的各種特效並應用到網站上喲~

謝謝各位看到這邊，也請各位看倌多多指教與交流。

Take time to smell the flowers!

Photo by Atikh Bana on Unsplash