實現一些簡單的CSS標題文字動畫效果可以使你的網站更加吸引人，在這篇文章中我們將學習該如何使用CSS實現動畫效果。

<h1 class="animated-text">這是一個標題</h1>
<style>
.animated-text {
animation-duration: 3s; /* 動畫持續時間 */
animation-name: animatedtext; /* 使用動畫名稱 */
animation-iteration-count: infinite; /* 動畫無限循環 */
}
@keyframes animatedtext {
0% {
font-size: 100%; /* 原始字體大小 */
color: #000; /* 字體顏色 */
}
50% {
font-size: 150%; /* 字體放大到150% */
color: #FF0000; /* 字體顏色變為紅色 */
}
100% {
font-size: 100%; /* 字體恢復原來大小 */
color: #000; /* 字體顏色恢復原來顏色 */
}
}
</style>

代碼解釋：

1. class="animated-text": 這是我們給標題添加的一個類名，用于在CSS中調用該元素。
2. animation-duration: 3s; 定義動畫的持續時間，這里為3秒。
3. animation-name: animatedtext; 定義動畫的名稱為animatedtext。
4. animation-iteration-count: infinite; 定義動畫的次數，這里我們將其設置為無限循環。
5. @keyframes animatedtext: 這是我們定義動畫的關鍵幀。
6. 0% { font-size: 100%; color: #000; }: 定義藝術狀態，字體大小和顏色取決于您的樣式文件中的值。
7. 50% { font-size: 150%; color: #FF0000; }: 這里我們定義了一個中間狀態，在這個狀態中，字體放大到150％，字體顏色變為紅色。
8. 100% { font-size: 100%; color: #000; }: 定義最后一個狀態，它將字體大小和顏色恢復到原始值。
9. 在style標簽中，我們將animation-name屬性設置為animatedtext，這意味著我們正在使用我們在@keyframes規則中定義的動畫名稱。
10. 最后，我們把class設置為“animated-text”的元素（在此例中為h1標簽）應用了CSS動畫，從而實現了標題文字動畫效果。