CSS3的animation屬性可以讓元素產(chǎn)生動畫效果。而其中的infinite屬性值則可以讓動畫無限循環(huán)播放。

但是，如果我們想讓多個元素依次循環(huán)執(zhí)行同一個動畫，該怎么實(shí)現(xiàn)呢？

這時候，就需要借助CSS3的animation-delay屬性了。這個屬性可以讓動畫在開始執(zhí)行前暫停一段時間，從而實(shí)現(xiàn)元素逐個執(zhí)行動畫的效果。

下面是一個簡單的示例：

.box {
width: 50px;
height: 50px;
background-color: #f00;
animation: example 2s infinite;
}
@keyframes example {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
.box:nth-child(2) {
animation-delay: 0.2s;
}
.box:nth-child(3) {
animation-delay: 0.4s;
}
.box:nth-child(4) {
animation-delay: 0.6s;
}

在上面的示例中，我們定義了一個.box類，將其寬高設(shè)置為50px并添加了一個紅色背景色。然后定義了一個@keyframes規(guī)則，讓元素從左往右移動100px。

接下來，我們通過:nth-child偽類分別為每個.box元素設(shè)置了不同的animation-delay值，以便實(shí)現(xiàn)元素依次循環(huán)執(zhí)行動畫的效果。

運(yùn)行代碼后，就可以看到每個.box元素依次開始執(zhí)行動畫了。

總的來說，CSS3的animation-delay屬性可以很方便地實(shí)現(xiàn)元素依次循環(huán)執(zhí)行動畫的效果，可以應(yīng)用于輪播圖、導(dǎo)航欄等多個場景中。