CSS是一個重要的網頁樣式語言，可以通過它來實現網頁的動畫效果。在本文章中，我們將學習如何使用CSS來創建簡單而優美的動畫效果。

首先，我們需要定義一個CSS動畫效果的關鍵幀，通過在不同的狀態下來定義元素的樣式來創建動畫效果。如下面的代碼所示：

@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: green;}
}

上述代碼定義了一個名為"example"的動畫效果，其中在0%、50%和100%的位置分別定義了元素的背景顏色為紅色、黃色和綠色。

接下來，我們需要將此動畫效果應用到某個元素上。我們可以通過以下代碼將動畫效果應用到一個div元素上。

div {
animation-name: example;
animation-duration: 4s;
}

上面的代碼將動畫效果應用到了一個名為“div”的元素上，動畫的名稱為“example”，時間為4秒鐘。當我們在瀏覽器中加載這個頁面時，我們就可以看到該元素向我們展示出非常漂亮的動畫效果。

在實際應用中，我們可以通過調整關鍵幀的狀態以及動畫的時長和速度來創建出更加酷炫的CSS動畫效果。同時，我們也可以在JavaScript中通過操作CSS屬性來控制元素的動畫效果，讓整個頁面變得更加生動有趣。