5-2. 運用外掛設計進場動畫
animate.css 提供了許多設計好的 CSS 動畫，可以設計進場動畫
前往 animate.css 網站
使用方法：
拷貝以下 HTML 原始碼，貼到 head 區域內 </head> 的前面
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
在需要進場動畫的元素物件的標籤中加上如下的屬性 (class 屬性不能重複喔)
class="animate__animated"
在 animate.css 網站查看再複製需要的動畫名稱，接著在 class 名稱中貼上動畫名稱，參考如下：
class="animate__animated animate__rubberBand"
參考說明：
animate.css 的操作說明
協助偵側網頁元素物件是否進入視窗可視範圍
wow.js 獨立存在並沒有用途，通常配合 animate.css 的動畫來呈現效果。
wow.js 負責偵測元素物件是否進入視窗可視範圍，進入可視範圍後再套用 animate.css 的動畫。
wos.js 介紹網站
wos.js 安裝說明文件 但，文件中的 animate.css 是舊版說明沒有更新，請參看前一小節。
TS使用說明：
拷貝以下 HTML 原始碼，貼到 </body> 的前面
<script src="https://cdn.jsdelivr.net/npm/wowjs@1.1.3/dist/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script>
new WOW().init();
</script>
在需要進場動畫的元素標籤的 class 名稱中加上 wow 名稱，參考如下：
class="wow animate__animated animate__rubberBand"
AOS 進場動畫
前往 AOS 網站
使用方法：
拷貝以下 HTML 原始碼，貼到 head 區域內 </head> 的前面
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
拷貝以下 HTML 原始碼，貼到 </body> 的前面
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script>
AOS.init();
</script>
在需要進場動畫的元素物件的標籤中加上如下的屬性 (參考 AOS 網站)
<div data-aos="fade-up">
參考說明：