animate.css 是一個(gè)非常受歡迎的 CSS 動(dòng)畫(huà)庫(kù)。它提供了一系列的 CSS 動(dòng)畫(huà)效果，可以幫助我們快速實(shí)現(xiàn)各種頁(yè)面的動(dòng)畫(huà)效果，比如淡入淡出、旋轉(zhuǎn)、放大縮小等等。animate.css 基于 CSS3 功能實(shí)現(xiàn)，不需要 JavaScript 或者其他第三方插件的支持。在使用 animate.css 動(dòng)畫(huà)效果的時(shí)候，我們常常需要控制動(dòng)畫(huà)效果播放的間隔，以達(dá)到更好的視覺(jué)效果。

// 控制動(dòng)畫(huà)間隔的 CSS 類(lèi)名
.delay-1s {
animation-delay: 1s;
}
.delay-2s {
animation-delay: 2s;
}
.delay-3s {
animation-delay: 3s;
}
// 淡入淡出動(dòng)畫(huà)效果，帶有間隔控制的 CSS 類(lèi)名
.fadeIn {
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
}
.fadeIn.delay-1s {
animation-delay: 1s;
}
.fadeIn.delay-2s {
animation-delay: 2s;
}
.fadeIn.delay-3s {
animation-delay: 3s;
}

在 animate.css 中，我們可以通過(guò)為元素添加 .delay-x 前綴的 CSS 類(lèi)名，來(lái)控制動(dòng)畫(huà)效果的間隔，其中 x 表示時(shí)間，單位為秒（s）。比如 .delay-1s 表示動(dòng)畫(huà)效果延遲 1 秒執(zhí)行。除了整體控制動(dòng)畫(huà)間隔的 CSS 類(lèi)名之外，針對(duì)某個(gè)特定類(lèi)型的動(dòng)畫(huà)，我們還可以添加對(duì)應(yīng)的間隔控制 CSS 類(lèi)名。比如 fadeIn 是一種常用的淡入淡出動(dòng)畫(huà)效果，我們可以使用 .fadeIn.delay-x 的方式來(lái)控制該動(dòng)畫(huà)效果的間隔。通過(guò)使用不同的間隔控制 CSS 類(lèi)名，我們可以實(shí)現(xiàn)各種不同的動(dòng)畫(huà)效果，從而讓網(wǎng)頁(yè)更加生動(dòng)有趣。