1.animation：哪個動畫，動畫過程 @keyframes

1. 建立動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
2. 針對的是一套樣式整體，transition是針對某些屬性所有變化。

.load-border {
    width: 120px;
    height: 120px;
    background: url(../images/loading_icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear; 
}
@keyframes gif {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
 

2.transition: 屬性變化的過渡過程，直接針對某個或某些屬性，只要這個屬性有變化，就加上這種過渡效果

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition:width 2s, height 2s, 
        background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
 

3.transform:  幾種常見變化方式，針對某個元素的旋轉、伸縮等幾個常見的變化函式（預設好的變化，是變化本身，可以結合transition表示過渡過程，狀態的最終樣子）

.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

總的來說，描述一個動畫主要是兩個方面：

一是狀態量，是某個時間點確定的狀態，針對圖形的屬性定性；

二是過程，是從某個狀態變到另一個狀態的過程，這其中的變化效果可以設定。

1.狀態量主要由屬性直接量、transform規定終點狀態這兩種方式來設定

2.過程設定主要由transition、animation兩個的值

 transition設定針對某個屬性，這個屬性的所有變化加上平滑的過渡效果，並且只針對一次完整的變化，因此沒有迴圈。

 animation是針對某個元素一整臺的樣式變化到另一套樣式，是一整個動畫的過程，有迴圈功能，偏向於複雜的整體樣式變化，並且過程可定製性更強，可以設定每個階段的狀態量，transition可能只是起點終點兩種狀態量的自動平滑過渡。

所以對某個圖形設定變化，可以先設定狀態量，考慮可否由transform提供的函式，或者屬性直接變換，然後加過渡效果，考慮是簡單的一次變化還是複雜的動畫效果。