在Web開發(fā)中，CSS3動畫是一個非常有用的工具。它可以創(chuàng)建令人驚嘆的效果來吸引用戶的注意力。不過有時候我們只想讓動畫播放一次，而不是循環(huán)播放。接下來我們來看一下如何實現(xiàn)這個功能。

在CSS中，我們可以使用animation-iteration-count屬性來設(shè)置動畫播放的次數(shù)。默認情況下，該屬性的值為infinite，表示動畫將無限播放。如果要讓動畫只播放一次，我們可以將該屬性的值設(shè)置為1。

.animation {
animation-name: my-animation;
animation-duration: 3s;
animation-iteration-count: 1; /* 設(shè)置動畫播放次數(shù) */
}
@keyframes my-animation {
/* 定義動畫效果 */
}

除了animation-iteration-count屬性之外，我們還可以使用animation-fill-mode屬性來控制動畫播放結(jié)束后的效果。默認情況下，動畫播放完畢后會回到原始狀態(tài)。如果要保持動畫結(jié)束后的狀態(tài)，可以將該屬性的值設(shè)置為forwards。

.animation {
animation-name: my-animation;
animation-duration: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards; /* 保持動畫結(jié)束后的狀態(tài) */
}
@keyframes my-animation {
/* 定義動畫效果 */
}

總結(jié)一下，要讓CSS3動畫只顯示一次，我們需要設(shè)置animation-iteration-count屬性的值為1，并可以選擇使用animation-fill-mode屬性來保留動畫結(jié)束后的狀態(tài)。