CSS樣式的關鍵幀是一種非常有利的方式來控制動畫的寬度和狀態。 關鍵幀定義了在動畫過程中發生變化的屬性的值。 在CSS中，可以通過@keyframes規則來創建和定義關鍵幀。 要創建關鍵幀，請使用@keyframes關鍵字后跟動畫名稱。 然后使用0％至100％之間的百分比來確定關鍵幀發生的時間。 在每個關鍵幀中，可以定義一個或多個屬性，并評估其變化。 以下是一個簡單的示例：

@keyframes myAnimation {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}

上面的示例演示了myAnimation名稱的動畫。 在0％，50％和100％的關鍵幀中，指定了不同的不透明度屬性值。 這將創建一個離散的半透明效果，并逐漸淡入和淡出畫面。 一個有趣的特性是您可以使用百分比之外的特殊關鍵字。 比如 "from" 代表的是0％，而 "to" 代表的是100％。 這可以讓您的代碼變得更加簡潔：

@keyframes myAnimation2 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

上面的樣式將圖像旋轉一圈。在這里我們不需要設置50％的關鍵幀，因為我們只是想要圖像旋轉一整圈。 因此，關鍵幀是一種非常有用的方式來控制CSS中的動畫效果。 了解如何編寫CSS樣式的關鍵幀將使您能夠創建更具吸引力和動態的網站。