CSS控制動畫循環是開發網頁動畫中重要的一個方面。通常,一個CSS動畫會只執行一次,一旦執行完畢,就會停止。不過有時候我們需要動畫循環多次,或者一直循環下去,直到用戶關閉網頁。
要實現這個功能,我們可以使用CSS的animation-iteration-count屬性。這個屬性控制動畫循環的次數,可以將值設為一個數值(代表動畫循環的次數),或者infinite(代表動畫無限循環下去)。
.animated-element { animation-name: slide-in; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes slide-in { from {transform: translateX(-100%);} to {transform: translateX(0);} }
在上面這個例子中,我們將animation-iteration-count的值設為infinite,代表動畫將一直循環下去。我們還可以將該屬性的值設為一個具體數字,比如5,代表動畫將循環5次。
總之,CSS控制動畫循環的方法很簡單。只需要添加一個animation-iteration-count屬性,并將其值設為infinite或一個具體數字,就可以讓動畫循環多次或一直循環下去。