Zi 字媒體

此篇文章瀏覽量： 1,348 通常一個動畫的效果，只要一套用至元素上，就會直接開始執行。但我們可以另外設一個延遲時間，例如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 設定是否要反向執行動畫 若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。 Tweet