在前端開發(fā)中，我們經(jīng)常會使用 CSS3 動畫來實(shí)現(xiàn)網(wǎng)頁中各種炫酷的效果。而有時(shí)候，我們需要控制 CSS3 動畫的次數(shù)，比如只讓它播放一次或者循環(huán)播放若干次。這時(shí)，就需要使用 animation-iteration-count 屬性來實(shí)現(xiàn)了。

/* 播放一次動畫 */
.animation {
animation-name: slidein;
animation-duration: 3s;
animation-iteration-count: 1;
}
/* 循環(huán)播放動畫三次 */
.animation {
animation-name: slidein;
animation-duration: 3s;
animation-iteration-count: 3;
}
/* 循環(huán)播放動畫無數(shù)次 */
.animation {
animation-name: slidein;
animation-duration: 3s;
animation-iteration-count: infinite;
}

如上代碼所示，我們只需要在動畫的 CSS 樣式中加入 animation-iteration-count 屬性，就可以控制它的播放次數(shù)。具體來說：

• 如果設(shè)置為 1，表示動畫只會播放一次。
• 如果設(shè)置為數(shù)字 n，表示動畫會循環(huán)播放 n 次。
• 如果設(shè)置為 infinite，表示動畫會循環(huán)播放無數(shù)次。

需要注意的是，動畫播放完畢后，元素會回到原始狀態(tài)。如果我們想讓它停留在最后一幀的狀態(tài)，可以使用 animation-fill-mode 屬性。

.animation {
animation-name: slidein;
animation-duration: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

像上面這樣設(shè)置后，動畫結(jié)束后元素會停留在最后一幀的狀態(tài)。如果不設(shè)置 animation-fill-mode 屬性，默認(rèn)值為 none，元素會回到原始狀態(tài)。

綜上所述，通過設(shè)置 animation-iteration-count 和 animation-fill-mode 屬性，我們可以很方便地控制 CSS3 動畫的播放次數(shù)和結(jié)束狀態(tài)。