animate.css 是一個流行的 CSS 動畫庫,提供了一系列動畫樣式讓開發者使用。其中,延遲 (delay) 是一個非常重要的屬性,可以讓動畫按照一定的時間順序展現。
在 animate.css 中,可以通過在類名中添加delay-{number}s
來設置延遲時間。其中,{number}
表示延遲的秒數,可以為小數。
例如,下面的代碼展示了一個使用了 3 秒延遲的動畫:
<div class="animate__animated animate__fadeInUp delay-3s">
這是一個使用了 3 秒延遲的動畫。
</div>
在這個例子中,元素會先被隱藏(默認狀態),然后在 3 秒后才開始展示動畫效果。
需要注意的是,延遲屬性不像其他動畫屬性一樣可以簡單疊加。如果同一元素中出現了多個延遲時間,只有最后一個會生效。
此外,delay 屬性還可以與其他屬性一起使用,比如 duration 和 iteration-count。例如:
<div class="animate__animated animate__heartBeat delay-1s iteration-2">
這是一個使用了 1 秒延遲、2 次循環播放的動畫。
</div>
在這個例子中,元素會首先隱藏,1 秒后開始播放心跳效果,每個循環都會持續 1.3 秒,共播放 2 次。
在開發過程中,靈活地使用動畫延遲屬性可以讓元素動畫更加優雅,也更具有吸引力。