# 8.1 第一個 animation

## 相關 CSS

* @keyframes：用來建立一個動畫效果的名稱，然後創造動畫影格。
* animation-name：某個動畫效果的名稱。
* animation-duration：動畫效果要執行的「期間」。

先瞭解這三樣東西，就可以至少將動畫效果套用至指定元素。

## 第一個 animation：旋轉

1、動畫名稱、初始狀態、最終狀態，程式碼的撰寫方式，如下圖：

<figure><img src="/files/6QkOjaGUXogLSTyDD9vo" alt=""><figcaption></figcaption></figure>

2、設定一個名稱叫做 **rotation** 的動畫，初始狀態(0%)時，設定 transform 為 rotate(0deg)；最終狀態(100%)時，設定 transform 為 rotate(360deg)，如下程式碼：

```css
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
```

3、讓某個元素套用由 **`@keyframes`** 做好的 **`rotation`** 動畫，並且設定執行期間為 5 秒：

```css
div.img_block{
  /*  套上動畫效果 */
  animation-name: rotation;
  animation-duration: 5s;
}
```

例：

{% embed url="<https://codepen.io/carlos411/pen/ExaKogP>" %}

這樣就完成了一個基本的動畫了。另外 `0%` 及 `100%` 有各自的保留字，故 0% 可改寫成用 **`from`** 來替代；100% 可改寫成用 **`to`** 來替代。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/responsive-web-design/8-animation-dong-hua-xiao-guo/8.1-di-yi-ge-animation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.