[CSS Animation] 6. 使用 animation-delay 設定動畫的延遲

通常一個動畫的效果,只要一套用至元素上,就會直接開始執行。但我們可以另外設一個延遲時間,例如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 秒,才開始執行。

回顧

其它語法不瞭解話,可以瀏覽之前的文章:

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of