CSS動畫是給網站帶來活力和趣味的好方法,但有時候你的動畫只希望播放一次,其他情況下則希望動畫重播。這個時候就需要使用CSS的重播屬性。
animation-iteration-count:n;
此屬性可以在CSS動畫的關鍵幀中設置,讓動畫在完成之后循環播放指定次數。其中,n
代表循環的次數,可以是數字,也可以是關鍵詞,如infinite(無限次)
。
.example { animation-name: move; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } }
在這個例子中,動畫將沿著x軸移動100像素,然后再返回原點,然后不斷循環播放。
另一種方式是使用關鍵詞alternate
,用于反復播放動畫。這會讓動畫先正向播放,然后反向播放,如此反復循環。
animation-iteration-count: 3; animation-direction: alternate;
這個例子中,動畫將循環播放3次,每次正向后反向,然后反復循環。
總之,使用CSS的重播屬性可以讓你很方便地控制動畫的播放次數和循環方式,從而讓你的網站更加生動有趣。