簡介
為網頁增加動畫效果的 CSS 插件，只需要載入 CDN 並在要有動畫效果的區塊加上 Class 名稱就能看到效果了。
效果有彈跳、淡入淡出、滑入滑出、旋轉過場、放大縮小過場 … 等，可以到 Animate.css 內試用看看每個有趣的動畫。
Animate.css
https://animate.style/
安裝
- NPM
1 | npm install animate.css --save |
- 在 HTML 載入
1 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" /> |
套用效果
在要套用動畫的元素 class 內加上 animate__animated 和有前綴 animate__ 的動畫名稱就可以了，以下方為例
1 | <h1 class="animate__animated animate__bounce">An animated element</h1> |
這就會執行 bounce 的動畫效果
應用的注意事項
要注意動畫效果有可能會 阻礙到使用者在觀看或使用體驗
- 在網頁中呈現動畫可以提升使用者的體驗，但有幾點必須注意
- 動畫目的在提示、轉換情境、進入、跳出 … 等讓使用者觀感更佳
- 避免設定在
<html>、<body>的標籤上，因為整個頁面跳動不一定比較好還可能產生奇怪的錯誤，建議是用一個區塊包著動態的物件會比較好 - 避免使用無止境的動畫
- 避免修改覆寫 CSS 屬性設定，因為可能會導至動畫效果失效產生奇怪的錯誤。
簡易的修改設定
若是要微調動畫 持續時間 、 延遲時間 還可以使用簡化寫法
- 延遲執行
- 直接在 class 增加
animate__delay-加上秒數，預設 1 至 5 秒
- 直接在 class 增加
1 | <div class="animate__animated animate__bounce animate__delay-2s">Example</div> |
- 控制動畫執行的速度
| class 名稱 | 預設速度時間 |
|---|---|
| animate__animated | 1s |
animate__slow |
2s |
animate__slower |
3s |
animate__fast |
800ms |
animate__faster |
500ms |
- 重複執行次數
| class 名稱 | 預設重複次數 |
|---|---|
animate__repeat-1 |
1 |
animate__repeat-2 |
2 |
animate__repeat-3 |
3 |