animate.css是一個非常流行的CSS動畫庫,它讓網(wǎng)頁動畫制作變得簡單易行。在使用animate.css時,有時候我們需要延遲動畫的啟動時間,這里介紹一下animate.css如何實現(xiàn)延遲。
我們可以在animate.css中使用animation-delay屬性來實現(xiàn)動畫延遲。這個屬性可以讓動畫在一定時間后才開始執(zhí)行。例如下面這個動畫效果,我們希望在頁面剛加載完時,動畫不要立即顯示,而是延遲1秒后再出現(xiàn):
.box { animation-name: fadeInUp; animation-duration: 2s; animation-delay: 1s; }
上面代碼中,我們使用了animation-delay屬性來讓動畫延遲1秒后開始執(zhí)行。這樣,當頁面加載完畢后,動畫就不會直接出現(xiàn),而是等待1秒鐘后慢慢出現(xiàn)。
當然,我們也可以給不同的元素設(shè)置不同的delay時間,讓它們分別延遲不同的時間執(zhí)行。例如:
.box1 { animation-name: fadeInUp; animation-duration: 2s; animation-delay: 1s; } .box2 { animation-name: fadeInUp; animation-duration: 2s; animation-delay: 2s; }
上面代碼中,box1和box2都是使用fadeInUp動畫效果,但是它們的animation-delay屬性值不同,分別為1秒和2秒。這樣,就可以讓box1在頁面加載完畢后等待1秒后執(zhí)行動畫,box2則要等待2秒后執(zhí)行。
總之,animation-delay屬性是animate.css中比較重要的一個屬性,它可以讓我們在進行網(wǎng)頁動畫制作時更加靈活自如,實現(xiàn)效果更加華麗。
上一篇16款css按鈕圖解