@keyframes是CSS3中用于創(chuàng)建動畫的關(guān)鍵幀規(guī)則。通過定義關(guān)鍵幀動畫的起始狀態(tài)和終止?fàn)顟B(tài),可以創(chuàng)建出各種復(fù)雜的動畫效果。@keyframes規(guī)則包含兩個部分:關(guān)鍵幀選擇器和聲明塊。
關(guān)鍵幀選擇器定義了動畫的時間點,通常使用百分比來表示。例如,定義從0%到100%的關(guān)鍵幀,表示動畫從開始到結(jié)束的過程。聲明塊則定義了在該時間點上元素的狀態(tài),包括位置、大小、顏色、透明度等。聲明塊可以包含CSS屬性和值,和普通的CSS樣式類似。
下面是一個@keyframes的簡單示例:
@keyframes myanimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
上面的代碼定義了一個名為“myanimation”的關(guān)鍵幀動畫,該動畫從透明度為0的狀態(tài)漸變到透明度為1的狀態(tài),動畫從開始到結(jié)束會經(jīng)歷0%到100%的過程。
在使用@keyframes時,通常需要通過CSS選擇器將該動畫應(yīng)用于特定的元素,例如:
div {
animation: myanimation 2s linear infinite;
}
上面的代碼表示將名為“myanimation”的關(guān)鍵幀動畫應(yīng)用于所有的div元素,動畫持續(xù)時間為2秒,動畫速度為線性,無限循環(huán)。
總的來說,@keyframes是一個非常強(qiáng)大的CSS3動畫屬性,通過定義關(guān)鍵幀和聲明塊可以創(chuàng)造出各種復(fù)雜的動畫效果,讓網(wǎng)頁更加生動有趣。