Animista 是一個網頁設計用的 CSS 動畫庫，這個平台收錄了數十種的淡入、淡出、旋轉、消失、強調之類的特效，且都沒用到任何的 JavaScript，是個很棒的免費資源。
我會找到 Animista 是因為現在的偵錯桐人基本上已經被我優化的差不多了，速度效能跟功能性也折騰到了一個平衡點，所以我希望能加一點簡單的特效，讓網站看起來能生動一些。現在我用了這個免費動畫庫中的「淡入」在網站內容主體中 (不包含頂部導覽列)，這樣進入網站時就比較不會有過大的生硬感。
因為我現在有拿來正式部署用的特效只有「淡入」，所以這次就以在 WordPress 中實現網頁淡入效果來介紹。
操作流程
一、前往 Animista 網站，從 Entrances 找到 Fade In (淡入) 的效果，並點擊預覽區塊右上角的 {‧} 按鈕來檢視 CSS 程式碼。
二、看到程式碼後，建議將 Autoprefixer 勾選起來，可以解決在部份瀏覽器中動畫失效的問題，而 Minify (最小化) 要不要勾就看個人，如果你沒有要修改這個動畫的話可以勾起來，省下一點點的流量。
三、將上下兩區塊的程式碼都複製起來，把它貼上到 WordPress 控制台 > 外觀 > 自訂 > 附加的 CSS，並修改 Class 名稱讓它能套用到現在的網頁架構。
以偵錯桐人網站為例，我要將淡入效果套用在主要內容區，用 F12 開發人員工具檢查後是 <main> 標籤，所以直接將 .fade-in 改為 main 並儲存就完成了。
更新網站樣式後，確認沒問題後記得要清快取，不然要等很久才看會生效喔……