animate.css是一個流行的CSS動畫庫,它可以用來為網頁元素添加各種酷炫的動畫效果。其中,延遲執行動畫便是其中之一。
使用animate.css添加延遲執行動畫非常簡單。首先,在HTML中添加需要動畫的元素,并為其定義一個Class,如下所示:
<div class="animated delay-2s fadeInUp"> <p>這是一個需要動畫的元素</p> </div>
可以看到,在元素的Class中,我們添加了animated(必須添加),delay-2s(表示延遲2秒執行)和fadeInUp(選擇執行的動畫效果)這三個屬性。
接著,我們需要在CSS中引入animate.css,并為之前定義的Class添加樣式,如下所示:
<link rel="stylesheet" href="animate.css"> <style> .animated { animation-duration: 1s; animation-fill-mode: both; } </style>
在上面的代碼中,我們首先引入animate.css,然后添加了一個樣式。其中,animation-duration屬性表示動畫的持續時間為1秒,animation-fill-mode屬性表示動畫執行后保持動畫最后一幀的狀態。
最后,我們便能在網頁中看到延遲執行的動畫效果了。