學習了一段時間CSS，總感覺自己行了，想自己寫一個網頁。開啟別人網頁的模板一看，好炫酷這圖怎麼還會轉動。一下子涉及到了我的知識盲區，其實這就涉及到了CSS的動畫效果。

CSS動畫基礎

一、

CSS @keyframes 規則

要建立 CSS 動畫，你需要了解 @keyframes 規則。

@keyframes 規則是建立動畫。

@keyframes 規則內指定一個 CSS 樣式和動畫將逐步從目前的樣式更改為新的樣式。

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

您可以改變任意多的樣式任意多的次數。

請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

0% 是動畫的開始，100% 是動畫的完成。

為了得到最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。

使用@keyframes的程式碼如下所示：

@keframes first {
from{}
to{}
}
或者
@keyframes first {
0%{}
100%{}
}

　　想要編寫CSS的動畫，肯定要先給他一個名字，不給他名字誰知道它是誰呢。

CSS3 動畫

當在@keyframes建立動畫，把它繫結到一個選擇器，否則動畫不會有任何效果。

指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

• 規定動畫的名稱
• 規定動畫的時長

div {
animation:first 1s
 
}

注意：動畫的預設值都是0，如果你想要的執行動畫，必須定義動畫的名稱和動畫的持續時間。

CSS3的動畫屬性

下面的表格列出了 @keyframes 規則和所有動畫屬性：

想必學到這裡你已經對於CSS的動畫效果有了一定的瞭解了，接下來讓我們試試自己動手來寫一個CSS的動畫吧！

我們來製作一個會旋轉的太極圖

首先是HTML部分，這部分很簡單隻需要建一個盒子

<div class="taiji"></div>

然後到了我們的重頭戲，CSS部分這部分我們需要給太極盒子附上顏色大小和今天學的動畫效果：

* {
    margin: 0;
    padding: 0
 
;
}

body {
    background-color: #ccc;
}

.taiji {
    width: 150px;
    height: 300px;
    margin: 100px auto;
    border-right: 150px solid #000;
    background-color: #fff;
    border-radius: 150px;
    animation: rotate 2s infinite linear;
}

.taiji::before,
.taiji::after {
    content: '';
    margin-left: 50%;
    display: block;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border: 50px solid #000;
    border-radius: 75px;
}

.taiji::after {
    background-color: #000;
    border: 50px solid #fff;
}

@keyframes rotate {
    from {}

    to {
        transform: rotate(-360deg);
    }
}

到這裡我們已經學習到了CSS動畫效果的一些基礎了，學無止境，fighting！