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 查詢瀏覽器支援度網站
Image may be NSFW.
Clik here to view.
圖片：1484638630053.jpgImage may be NSFW.
Clik here to view.
所以看得出來，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檔也可以直接從官網下載
Image may be NSFW.
Clik here to view.
圖片：1484639044142.jpgImage may be NSFW.
Clik here to view.
支援的效果列表
Image may be NSFW.
Clik here to view.
Clik here to view.
使用起來很簡單，只要加上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 次，是不是很容易？
也可以看看影片喔