animate.css是一款流行的CSS動畫庫,它可以讓你的網站變得更加生動有趣。它支持的動畫類型非常豐富,如翻轉、彈跳、淡入淡出、旋轉等等。但是,很多人可能會對animate.css的動畫時間不太了解。
animate.css的動畫時間是由類名來控制的。當你為一個元素添加animate.css的動畫類名時,它會自動應用相應的的CSS樣式。例如:
class="animate__animated animate__bounceIn"
在上面的代碼中,我們使用了animate__animated 和 animate__bounceIn 兩個類名,用于實現一個彈跳動畫效果。值得注意的是,animate__animated 這個類名是必須的,否則這個動畫將不會生效。而 animate__bounceIn 這個類名則用來指定動畫的類型。
那么,animate.css 的動畫時間是多少呢? 在默認情況下,不同的動畫類型的時間是不同的。例如:
300ms 的動畫時間:animate__fadeIn, animate__fadeOut, animate__flipInX 等;
600ms 的動畫時間:animate__bounce, animate__flash, animate__tada 等;
1000ms 的動畫時間:animate__rotateIn, animate__zoomIn 等。
你也可以通過為元素添加 animate__duration--{duration}s 類名來自定義動畫時間,其中 {duration} 可以是任何你想要的秒數。
總之,animate.css提供了豐富的動畫效果,通過掌握它的類名和動畫時間,我們可以在網站中實現更加多樣化、生動有趣的效果。