CSS關鍵幀屬性可以讓我們控制動畫在不同時間點的狀態，使得動畫更加靈活生動，為網站帶來更好的用戶體驗。

/* 定義一個關鍵幀動畫 */
@keyframes example {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: green; }
}
/* 應用該動畫 */
div {
animation-name: example;
animation-duration: 4s;
}

上述代碼中，我們定義了一個名為“example”的關鍵幀動畫，其中0%表示動畫開始時的狀態，50%表示動畫進行到一半時的狀態，100%表示動畫結束時的狀態。我們還在CSS選擇器中使用了animation-name屬性將該動畫應用到div元素上，并設置了動畫持續時間為4秒。

除了animation-name和animation-duration，我們還可以使用其他動畫屬性來控制關鍵幀動畫的效果，例如animation-delay、animation-iteration-count、animation-direction等等。

/* 每2秒重復一次 */
div {
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
/* 反向進行 */
div {
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
/* 從結束狀態到開始狀態反復進行 */
div {
animation-name: example;
animation-duration: 4s;
animation-direction: alternate;
}

通過這些屬性的組合應用，我們可以打造出更加豐富多彩、生動有趣的動畫效果，為網站增添活力，提高用戶滿意度。