首先了解一下 Animation的基本用法，使用其需要給動畫指定一個週期持續的時間，以及動畫效果的名稱。可以看一下demo

註釋：這是一個給透明和背景色屬性設定的一個動畫過渡效果

實現很簡單（具體看到程式碼中的註釋）：

 1         .block_wrap {
 2             width: 500px;
 3             height: 500px;
 4             background: #e3e3e3;
 5             /*第一個引數為這個動畫的持續時間，第二個引數是動畫效果的標題，可以理解為定義一個class，不過這是專屬於動畫的class
 
*/
 6             animation: 4s opacity;
 7             margin: 0 auto;
 8         }
 9         /*動畫效果，opacity為效果標題，@keyframes必須要寫*/
10         @keyframes opacity {
11             0% {opacity: 0; background: }
12             25% {opacity: 0.25}
13             50% {opacity: 0.5}
14             100% {opacity: 1; background
 
: red}
15         }

除了程式碼中的註釋，另外還需要說一下，opacity 中，從 0%—100%，這是我們給動畫指定的一個持續週期，指定了到哪個程度，動畫就按照裡面的屬性進行展示，這個週期是必須的！

上面是一個很簡單的動畫，重新整理一次頁面即展示一次，如果想要重複地展示動畫效果呢？簡單，只需要新增一個infinite 關鍵字 ，可以指定迴圈次數，將 infinite 關鍵字換成數字即可。

1             /*新增infinite關鍵字，使其可重複*/
2             animation: 4s opacity infinite;

註釋：這是一個重複展示的動畫效果

動畫預設在展示完後回到初始狀態，有時想讓動畫定格在最後狀態，可以使用 animation-fill-mode 屬性，該屬性有三個值

• none：預設值，動畫展示完後回到初始狀態
• backwards：動畫回到第一幀的狀態
• forwards：動畫定格在最後狀態
• both：根據animation-direction 輪流應用forwards和backwards規則

使用：

            /*直接在後面新增即可*/
            animation: 1s opacity forwards;

下面看一下backwards的效果：

註釋：backwards的效果，簡單動畫時，和none差不多

在上面寫demo嘗試以上屬性時，發現動畫迴圈播放時，其實都是從初始狀態開始，那麼如果不想這樣子呢？有另一個屬性 animation-direction可以定義它的播放，direction有以下值：

• normal：預設值，對動畫播放無狀態影響
• alternate：改變其播放方向，先是按照正常播放，接著反方向播放，以此迴圈
• reverse：動畫按照反方向播放
• alternate-reverse：先是反方向播放，接著正方向播放，以此迴圈

 1         .block_wrap {
 2             width: 500px;
 3             height: 500px;
 4             background: #e3e3e3;
 5             /*新增infinite關鍵字，使其可重複,接著更換每個不同值看效果*/
 6             animation: 1s opacity infinite alternate-reverse;
 7             margin: 0 auto;
 8         }
 9         /*動畫效果，opacity為效果標題，@keyframes必須要寫*/
10         @keyframes opacity {
11             to {
12                 transform: rotate(360deg);
13             }
14         }

可以使用上面這段程式碼，更換每個值看一下效果。

我們在上一篇，transition的學習中有提到，transition是有簡寫形式的，也可以分開來寫。同理，animation也是可以這樣的，全部的屬性簡寫如下：

1             /*第一個為動畫持續時間，第二個為動畫延遲（delay）時間,第三個為動畫效果標題，第四個為動畫狀態變化速度，第五個為迴圈次數，第五個為動畫狀態設定，第六個為動畫播放方向*/
2             animation: 1s 1s opacity linear infinite forwards normal;

分開寫也是可以的

 1             /*動畫標題*/
 2             animation-name: opacity;
 3             /*動畫持續時間*/
 4             animation-duration: 1s;
 5             /*動畫狀態變化速度*/
 6             animation-timing-function: linear;
 7             /*動畫延遲（delay）時間*/
 8             animation-delay: 1s;
 9             /*動畫狀態設定*/
10             animation-fill-mode:forwards;
11             /*動畫播放方向*/
12             animation-direction: normal;
13             /*迴圈次數*/
14             animation-iteration-count: infinite;

在瞭解animation的過程中，發現在使用animation時，往往配合著 @keyframes，個人理解為，它是一個專屬於動畫的class，它用來定義動畫的各個狀態，下來了解一下它的寫法，上述所用到的寫法

1         @keyframes opacity {
2             to {
3                 transform: rotate(145deg);
4             }
5         }