過去我們要為網站加上動畫特效可能需要寫一大串的JavaScript，隨著web技術越來越發達，在CSS3中也加入了一系列的動畫屬性，以減少程式撰寫的成本；不過還是需要進行不少設定，而Animate.css就是一個幫你把一堆常見的特效打包好的CSS library。

使用Animate.css

一樣的，你可以使用CDN或NPM來取得Animate.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

大多數的library都是一樣的步驟，官方的說明文件也很清楚，所以之後就不再介紹前置的設定，以免有灌水嫌疑XD

Animate.css內建了超過70種的動畫效果，要套用特效前必須先在要套用的特效加上animated這個class，然後再加上你想要的特效class，例如想要像果凍一樣彈跳的特效，程式碼看起來就會像這樣

<div id="target" class="animated jello">
  <h1>
    鐵人萬歲!
  </h1>
</div>

只要用瀏覽器打開你的頁面，立刻就可以看到彈跳的效果囉！

如果希望自行觸發特效，例如按下按鈕之類的話，也可以動態的在事件發生時替你要產生特效的目標加上class

  $('#button').click(function(){
    $('#target').addClass('animated jello')
  });

不過這樣動畫只會發生一次，如果希望每次事件發生都觸發動畫的話，也可以在特效結束時把這兩個class移除掉：

  $('#target').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
  	$('#target').removeClass('animated jello');
  });

這麼一來每次按下按鈕就都會觸發特效囉！

以下是今天的程式demo: https://jsfiddle.net/wellwind/zt72Lbps/

關於每種特效想要瀏覽，可以直接上官網看看: https://daneden.github.io/animate.css/

類似資源

Hover.css: 著重在滑鼠移到元素上時才會產生的特效。

文章同步發表於: https://dotblogs.com.tw/wellwind/2016/12/04/front-end-animate-css

不正經閒聊

1秒加動畫很厲害，可以1秒變格格嗎?(看不懂請看影片: https://www.youtube.com/watch?v=aqNsaEL-wM4)