CSS控制動畫的播放和停止

在CSS中，我們可以使用animation-play-count屬性來控制動畫的播放次數(shù)，該屬性指定了動畫應(yīng)該播放的次數(shù)，當(dāng)動畫達(dá)到指定的次數(shù)后，它會自動停止。

如果你想要一個動畫只播放一次，你可以這樣設(shè)置：

.my-animation {
  animation-name: my-animation;
  animation-play-count: 1;
}

在這個例子中，my-animation只會播放一次，當(dāng)動畫完成后，它不會再重復(fù)播放。

如果你想要動畫無限循環(huán)播放，你可以將animation-play-count設(shè)置為infinite：

.my-animation {
  animation-name: my-animation;
  animation-play-count: infinite;
}

這樣，my-animation就會一直循環(huán)播放，直到被明確停止。

animation-play-count屬性只對使用animation屬性定義的關(guān)鍵幀動畫有效，如果你使用的是@keyframes規(guī)則定義的動畫，那么你需要確保你的動畫有明確的結(jié)束狀態(tài)，否則可能會導(dǎo)致動畫無法正確停止。

通過animation-play-count屬性，我們可以***地控制CSS動畫的播放次數(shù)，從而實現(xiàn)我們想要的效果。