CSS動畫是網頁設計中不可或缺的一部分，而計時動畫是其中最為常見的一種。通過CSS里的@keyframes規則，可以讓元素在一定時間內依照設定的百分比呈現出不同的狀態，從而實現動畫效果。

.timer {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #f1c40f;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #fff;
animation: countdown 5s linear forwards;
}
@keyframes countdown {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

上面的代碼展示了一個簡單的計時動畫效果，通過旋轉一個圓圈來模擬倒計時的過程。首先定義了一個.timer類，設置了圓形的形狀、背景顏色、字體樣式等。接著在動畫中使用了@keyframes規則，在五秒的時間內讓元素從0度旋轉到360度，最后保持旋轉狀態。

在實際應用中，計時動畫可以用于各種場景，比如完成某個操作的提示、倒計時的展示等等。通過結合不同的CSS屬性，還可以產生各種不同的動畫效果，讓網頁看起來更加生動有趣。