CSS3的animate動畫效果可以為我們網頁添加非常驚艷的動態效果,例如旋轉、淡入淡出、平移等,使得我們的頁面更具有吸引力和趣味性。但是有時候一個動畫執行完成后立即接著執行下一個動畫效果并不是我們想要的,這時候,我們就可以使用CSS3的animate delay屬性來延遲動畫的執行。
animate delay即延遲動畫執行的時間,使用delay屬性時,我們只需要使用一個整數或小數作為參數,其單位為秒。例如:
div{ animation-delay: 1s; }
上面的代碼表示該元素的動畫效果將在1秒后才開始執行。如果我們需要多個元素同時執行不同的動畫效果,但是又不能同時開始,我們就可以為它們分別設置不同的delay值,來讓它們有一定的間隔時間,以達到異步執行的效果。
除了數字之外,我們還可以使用關鍵詞值進行設置。常用的關鍵詞值有以下幾種:
- 0s:立即執行(默認值)
- infinite:無限重復執行
另外,CSS3的animate delay屬性可以與其他屬性組合使用,例如我們可以將delay屬性與animation-duration一起使用,來控制動畫效果在一定的時間內完成。
div{ animation-duration: 2s; animation-fill-mode: forwards; animation-delay: 1s; }
上面的代碼表示該元素的動畫效果將在1秒后開始執行,執行2秒后保持狀態,不會恢復初始狀態。
值得注意的是,animate delay屬性并不是所有瀏覽器都支持。因此,在使用該屬性時,我們需要注意瀏覽器的兼容性,并進行相應的兼容處理。