animate.css 是一個著名的 CSS 動畫庫,通過它,我們可以很方便地實現各種動畫效果。在 animate.css 中,時間設置是非常重要的部分,也是掌握 animate.css 動畫效果的關鍵所在。
時間設置有兩種方式,一種是使用默認的動畫時間,另一種是自定義動畫時間。
// 使用默認的動畫時間 .animation { animation: fadeIn; // 默認時間為 1s } // 自定義動畫時間 .animation { animation: fadeIn 2s; // 動畫時間為 2s }
在自定義動畫時間時,我們可以給出一個數字,表示動畫的時間長度。我們還可以給出兩個數字,第一個數字表示動畫時間長度,第二個數字表示動畫的延遲時間。
// 動畫時間為 3s,延遲時間為 1s .animation { animation: fadeIn 3s 1s; }
除了上述基本的動畫時間設置,還有一個特殊的 "infinite" 關鍵字,可以讓動畫無限循環。
// 無限循環的動畫 .animation { animation: pulse infinite; }
通過上述的時間設置方式,我們可以輕松實現 animate.css 動畫庫中各式各樣的動畫效果。