在CSS中,您可以通過設(shè)置動畫的循環(huán)次數(shù)來使動畫一直播放,您可以使用animation-iteration-count
屬性來指定動畫的循環(huán)次數(shù),以下是一些示例代碼,展示如何實(shí)現(xiàn)這一點(diǎn):
示例1:使用CSS使動畫一直播放
@keyframes example { 0% { background-color: red; } 50% { background-color: blue; } 100% { background-color: green; } } .my-element { animation: example 2s linear infinite; /* 設(shè)置動畫為無限循環(huán) */ }
在這個示例中,example
是一個關(guān)鍵幀動畫,它會在2秒內(nèi)將背景顏色從紅色變?yōu)榫G色,通過animation
屬性,我們將這個動畫應(yīng)用到.my-element
元素上,并設(shè)置動畫的循環(huán)次數(shù)為無限(infinite
)。
示例2:使用CSS使動畫持續(xù)播放
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .my-icon { animation: spin 1s linear infinite; /* 設(shè)置動畫為無限循環(huán) */ }
在這個示例中,spin
動畫會使元素進(jìn)行旋轉(zhuǎn),通過animation
屬性,我們將這個動畫應(yīng)用到.my-icon
元素上,并設(shè)置動畫的循環(huán)次數(shù)為無限(infinite
)。
示例3:使用CSS讓動畫不斷重復(fù)
@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } .my-image { animation: fade 1s linear infinite; /* 設(shè)置動畫為無限循環(huán) */ }
在這個示例中,fade
動畫會使元素從透明變?yōu)椴煌该?,通過animation
屬性,我們將這個動畫應(yīng)用到.my-image
元素上,并設(shè)置動畫的循環(huán)次數(shù)為無限(infinite
)。
要使CSS動畫一直播放,您可以使用animation-iteration-count
屬性或者設(shè)置animation
屬性的值為infinite
,這樣,您的動畫就會持續(xù)不斷地循環(huán)播放了。