[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 秒，才開始執行。

回顧

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

• [CSS Animation] 1. 嗨，animation 初步探訪
• [CSS Animation] 2. keyframes 中的群組化
• [CSS Animation] 3. 同一個元素套用多個動畫效果
• [CSS Animation] 4. 使用 animation-iteration-count 設定播放次數
• [CSS Animation] 5. 使用 animation-direction 設定是否要反向執行動畫