CSS 動畫特效大觀園 - Animate.css 自動展示

身為老派全端攻城獅，我對網頁動畫效果的知識前幾年還停在 jQuery fadeIn()、slideDown() 時代，腦中的想像是用 JavaScript 間隔固定時間修改 CSS 樣式數值。這些年見了一點世面，發現前端世界早就變了，現在大家都用 CSS 做網頁動畫。很早之前各家瀏覽器便嘗試內建動畫支援，透過 CSS 指定起始點或不同百分比階段的樣式狀態，由瀏覽器計算產生線性變化實現動畫效果，比用 JavaScript 實作省時省力，效能還好上一大截。早期用 CSS 動畫需面對瀏覽器支援程度不一的問題，但隨著 CSS 動畫已成現代瀏覽器的標準功能，語法規範也已統一，更重要的是孤僻不合群的 IE 去年也成為歷史，這年頭要做網頁動畫，CSS 是不二選擇。

如果你跟我一樣，不想花太多心思研究 CSS 動畫樣式語法，想用最小的力氣做到老闆客戶使用者口中的「讓文字從下面飛上來，看起來比較炫」、「點到項目時要像彈簧抖一下，加點俏皮感」，有個絕妙好物 - Animate.css，一個開源的純 CSS 動畫特效庫，用法超簡單，只需在 HTML 元素加上 class="animate__animated animate__動畫效果名稱"，便能為網頁加上五花八門的動畫效果。

Animate.css 官網本身便能點特效名稱看展示，不過我禁不住手癢，還是用 Vue.js 3 寫了個播放器當成練習題暖身，一樣有點選播放動畫功能，更重要的是支援自動播放，適合像我這種對 CSS 可以做出哪些酷炫特效沒什麼概念的劉姥姥，坐著靜靜觀賞增廣見聞。

Animate.css 完整展示

CSS 動畫大觀園在此，想實地參觀的話這邊請：https://darkthread.github.io/animate-css-demo/ (若看不到動畫特效，請參考文末連結，確認是否被作業系統關閉)

對於 Vue.js 寫法有興趣的同學，原始碼在這裡。

提醒：在設計動畫特效時，需留意使用者可能透過作業系統設定要求降低或取消視覺動態變化，網頁應配合調整做法。參考：網頁動畫怎麼失效了？作業系統的動畫相關設定

A Vue.js 3 example of Animate.css demostration auto play.