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