此篇文章瀏覽量:
1,692
通常一個動畫的效果,只要一套用至元素上,就會直接開始執行。但我們可以另外設一個延遲時間,例如1秒,那當元素套用至動畫效果後,會先經過1秒,才會開始執行。就是透過 animation-delay 來達成的。
此篇文章同步於字媒體。
關於 animation-delay
當一個動畫效果,套用至某元素之後,都會立即開始執行。但有的時候,我們會希望先等待一段時間,才開始執行,就會需要透過 animation-delay 來達成。至於秒數的設定,可以是 1s (1秒) 或 100ms (100毫秒) 這樣的單位。
語法
animation-delay: 1s;
或
animation-delay: 100ms;
範例
以下定義了一個 rotate1 的一個動畫效果,一旦套用至元素後,該元素就會以順時針的方向,旋轉 360 度一圈。我們將 rotate1 這個動畫效果,套用至 .-ani1 和 .-ani2 這兩個 div 元素,且都設定了3秒鐘的動畫執行期間(animation-duration)。
然而,只有在 .-ani2 元素,加上了延遲1秒的設定(animation-delay)。
請觀察執行的結果,.-ani1 元素馬上就執行了,而 .-ani2 先經過 1 秒,才開始執行。
回顧
其它語法不瞭解話,可以瀏覽之前的文章:
- [CSS Animation] 1. 嗨,animation 初步探訪
- [CSS Animation] 2. keyframes 中的群組化
- [CSS Animation] 3. 同一個元素套用多個動畫效果
- [CSS Animation] 4. 使用 animation-iteration-count 設定播放次數
- [CSS Animation] 5. 使用 animation-direction 設定是否要反向執行動畫