隨著網頁設計的不斷發展，動畫已成為吸引用戶的重要手段之一。在這些動畫效果中，使用 CSS 字體動畫可以讓你的網站更加生動和有趣。

@keyframes bounce {
0% {transform: translateY(0);}
50% {transform: translateY(-20px);}
100% {transform: translateY(0);}
} 
h1 {
animation: bounce 2s infinite;
}

上述代碼展示了一個簡單的字體彈跳效果。關鍵幀 @keyframes 定義了彈跳的動畫，規定了字體狀態的變化。在 h1 元素上應用 animation 屬性，即可實現該效果。

@keyframes light {
0% {color: #fff;}
50% {color: #ffc107;}
100% {color: #fff;}
}
h2 {
text-shadow: 1px 1px #666;
animation: light 2s infinite;
}

此代碼片段演示了另一個有趣的效果：字體閃爍。通過應用 text-shadow 屬性，可以讓字體在淺色背景上更加清晰，并在動畫中切換字體顏色。

@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
h3 {
animation: rotate 2s linear infinite;
}

你還可以制作旋轉動畫，在這個例子中，@keyframes 規定了字體逆時針旋轉 360 度的動畫。在 h3 元素上應用 animation 屬性，即可實現字體的旋轉。

CSS 字體動畫為網頁帶來了更加豐富的效果，可以使網站更加生動有趣。嘗試使用不同的關鍵幀組合和屬性，你可能會發現更多驚艷的效果。