CSS是前端開發中非常重要的一部分，它不僅可以控制網頁的樣式，還可以用來做出精美的動畫效果。今天，我們就來學習如何使用CSS來創建動圖。

animation: 動畫名稱 動畫時長 動畫速度 曲線 動畫次數 是否反向顯示 是否暫停;

我們可以通過簡單設置這些參數，便可以輕松地給元素添加動畫效果。下面，我們就來具體了解一下這些參數的作用。

/* 定義動畫關鍵幀 */
@keyframes 動畫名稱 {
0% {
/* 動畫初始狀態 */
}
100% {
/* 動畫結束狀態 */
}
}
/* 設置元素動畫 */
.animation-element {
animation: 動畫名稱 2s ease 0s infinite alternate none;
}

首先，我們需要定義一個關鍵幀動畫。在CSS中，可以通過@keyframes關鍵字定義動畫的起止狀態。其中，0%表示動畫的初始狀態，而100%則代表動畫的結束狀態。通過設置不同的中間狀態，便可以讓元素產生不同的動畫效果。

接著，我們就可以在需要添加動畫效果的元素中設置animation屬性。其中，第一個參數為動畫名稱，需要與定義的關鍵幀動畫名稱相同。第二個參數為動畫時長，可以使用s/ms單位。第三個參數為動畫速度，常見的值有ease、linear、ease-in、ease-out、ease-in-out等。第四個參數為動畫曲線，可以使用貝塞爾曲線自定義。第五個參數為動畫次數，可以使用默認值（1）或者設置為infinite表示無限次播放。第六個參數為是否反向播放，默認為none。第七個參數為是否暫停，默認為running。

通過設置這些參數，我們便可以輕松地給元素添加動畫效果了。CSS動畫非常靈活，既可以用于按鈕的點擊效果，也可以用于元素的滾動動畫等。希望本文對你有所幫助，謝謝閱讀！