Animate.css說明
- 懶得寫animation CSS動畫嗎？Animate.css幫忙寫了很多不錯的動畫喔!!
- 跨瀏覽器的CSS動畫庫，容易上手。
- 官網GitHub：https://github.com/daneden/animate.css
- 官網動畫呈現：https://daneden.github.io/animate.css
- 本網整理動畫呈現一覽表：連結
- License: MIT
《安裝方法》
方法1：下載及安裝
下載animate.css，在<head>區
方法2：CDN連結，參考網站
《用法》
(1) animate.css內含 78 個不同的動畫效果，針對動畫元素，增加【.animated】class名稱即可使用，動畫對照表一覽表，連結位置
預設動畫期間為1sec
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
(2)其他設定：
| class名稱 | 描述 |
|---|---|
| animated | 啟用動畫 |
| infinite | 無限循環 |
| animate動畫名稱 | 動畫一覽表連結 |
| class名稱 | 延遲時間 |
|---|---|
| delay-1s | 1s |
| delay-2s | 2s |
| delay-3s | 3s |
| delay-4s | 4s |
| delay-5s | 5s |
| class名稱 | 延遲時間 |
|---|---|
| slow | 2s |
| slower | 3s |
| fast | 800ms |
| faster | 500ms |
範例
Example
(3)若未使用上表的設定，即自行加入CSS樣式：
.yourElement {
animation-duration: 3s; /* 動畫執行期間 */
animation-delay: 2s; /* 延遲動畫開始時間 */
animation-iteration-count: infinite; /* 動畫播放次數，重覆執行為infinite */
}