UNITiD 的「Why use micro-animations in your design?」中說明了使用微動畫的好處
包括了：
- 更直覺的介面
- 互動、介面變化的前因後果更清楚
- 吸引使用者注意
- 暗示元件的「可操作性」
- 在觸控裝置上取代「hover」滑鼠移飄過效果
- 給予使用者正面回饋
這種效果以往在PC上稱霸的Flash可以說明人們有多愛這種互動
如今在手機上倒是可以利用現成的CSS3 Animation 屬性來創造一些小驚喜，正因為手機瀏覽器都支援CSS3的Animation 屬性，所以這種方法負擔最小，少少付出就可以立即得到回饋。
PC上也是可以的，除了部分不支援CSS3 的瀏覽器之外，大家可以到 Can I use 網站輸入CSS Animation 就可得知，這個網站很好用的，該記下來才是。
Can I use 查詢瀏覽器支援度網站
圖片：1484638630053.jpg
所以看得出來，IE11才支援，Opera 則全部GG，所以也未必如我所說的那麼樂觀，手機上還是會有不少GG的情況，例如 Android 內建的 Webview 若版本太舊就可能支援有問題。
好了，如果決定要用，就可以自己改CSS了，在 animation 相關屬性的部份，可以使用的 CSS 屬性有：
animation-delay 網頁元素被載入後到開始播放動畫之間的等待時間。
animation-direction 在動畫播放完之後，是否以相反方向的方式播放，或從頭開始（原方向）重複播放。
animation-duration 設定整個動畫播放一次的時間長度。
animation-iteration-count 設定動畫播放的次數，若要不斷重複播放，則可設為 infinite。
animation-name 設定 @keyframes at-rule 所使用的動畫名稱。
animation-play-state 本屬性可用來暫停或繼續動畫播放。
animation-timing-function 透過加速曲線（acceleration curves），設定動畫播放的速度。
animation-fill-mode 設定動畫元素在播放前與播放後，如何套用 CSS 的樣式。
有興趣大家可以去查一下詳細的 animation 相關屬性，但若需求只是一些些簡單的動態，也可以考慮 Daniel Eden開發的一套 Animate.css 的CSS3 Animation 預設集大全，內含 75 個不同的動畫效果，我們只要透過設定 Class 的方式使用即可，很方便的。
當然，還是要稍微知道一下用的是 CSS3 Animation那些屬性和相關語法，這樣我們才知道那個瀏覽器能用，而有時要自訂效果時也會更加清楚一些。
Animate.css 使用方式很簡單，各種可用的效果在官網就可以測試了，css檔也可以直接從官網下載
圖片：1484639044142.jpg
支援的效果列表
使用起來很簡單，只要加上Class的名稱即可，當然，首頁要引入 Animate.css 樣式檔，可載入線上路徑，或各位自行下載後的路徑
如：
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
接著在Class加入即可
<h2 class="animated infinite bounce"> Hello World! </h2>
其中「animated」代表的是動畫，「infinite」代表了無限循環，而「bounce」則代表了「彈跳」這個效果， 只要根據上圖的效果更換即可得到不同的動畫效果，例如「flash」「pulse」等。
是不是很方便？
如前所述，我們也可以利用CSS的屬性來調整動畫次數、時間長度等等，例如
<h2 class="animated bounce" style="animation-duration: 5s;animation-iteration-count:3">
Hello World!
</h2>
就代表 每次 5 秒的速度重覆彈跳 3 次，是不是很容易？
也可以看看影片喔