CSS3 animate重復是一個非常常用的功能,可以讓一個動畫不停止地重復播放。
在CSS3中,可以使用animation-iteration-count屬性來指定動畫重復的次數。示例代碼如下:
/* 動畫定義 */ @keyframes move { from {transform: translateX(0);} to {transform: translateX(200px);} } /* 動畫應用 */ .element { animation-name: move; animation-duration: 2s; animation-iteration-count: infinite; /* 指定無限次重復 */ }
在上述代碼中,animation-iteration-count屬性的值為infinite,表示動畫無限次重復播放,即動畫會一直持續下去。
除了使用infinite,我們還可以指定具體的重復次數。例如,我們可以將animation-iteration-count設置為2,表示動畫重復播放兩次。
.element { animation-name: move; animation-duration: 2s; animation-iteration-count: 2; /* 指定重復2次 */ }
除了animation-iteration-count屬性外,還有一些其他屬性可以用于控制動畫的重復行為。例如,animation-direction屬性可以指定動畫的播放方向,包括normal(正常播放)、reverse(反向播放)、alternate(交替播放)和alternate-reverse(交替反向播放)等。
總之,CSS3 animate重復是一個非常有用的功能,能夠讓我們實現各種酷炫的動畫效果。只需簡單設置一些CSS屬性,就能夠讓動畫不停止地重復播放,讓我們的網頁更加活躍和生動。