CSS動(dòng)畫(huà)的持續(xù)時(shí)間可以通過(guò)animation-duration
屬性進(jìn)行設(shè)置,該屬性用于指定動(dòng)畫(huà)完成一個(gè)周期所需的時(shí)間,即動(dòng)畫(huà)的持續(xù)時(shí)間。
要設(shè)置CSS動(dòng)畫(huà)的持續(xù)時(shí)間,可以按照以下步驟進(jìn)行操作:
1、在CSS樣式表中定義動(dòng)畫(huà)的關(guān)鍵幀,關(guān)鍵幀用于描述動(dòng)畫(huà)在不同時(shí)間點(diǎn)的狀態(tài)。
2、在動(dòng)畫(huà)選擇器中添加animation-duration
屬性,并設(shè)置所需的值,該屬性的值可以是具體的時(shí)間值,如秒或毫秒,也可以是相對(duì)值,如fast
或slow
。
以下代碼將創(chuàng)建一個(gè)持續(xù)時(shí)間為2秒的CSS動(dòng)畫(huà):
@keyframes example { 0% { background-color: red; } 50% { background-color: blue; } 100% { background-color: green; } } .my-element { animation-name: example; animation-duration: 2s; }
在這個(gè)例子中,動(dòng)畫(huà)example
會(huì)在2秒的時(shí)間內(nèi)完成從紅色到綠色再到藍(lán)色的過(guò)渡。
animation-duration
屬性僅適用于使用CSS動(dòng)畫(huà)關(guān)鍵幀創(chuàng)建的動(dòng)畫(huà),對(duì)于使用CSS過(guò)渡創(chuàng)建的動(dòng)畫(huà),持續(xù)時(shí)間可以通過(guò)transition-duration
屬性進(jìn)行設(shè)置。
還可以通過(guò)animation-timing-function
屬性來(lái)定義動(dòng)畫(huà)的速度曲線,如線性(linear
)、緩入緩出(ease-in-out
)等,以進(jìn)一步控制動(dòng)畫(huà)的表現(xiàn)效果。