使用 CSS animations 做動畫好處
  1. 不必懂得 JavaScript，就可以寫一不複雜的動畫或屬性改變。
  2. 讓瀏覽器來負責動畫的產生過程，如此可以擁有較好的優化。
  3. CSS animation 相較於 JavaScript 在資源消耗上，具有相當優勢，
    4. 即使在系統負載超過 50% 仍可有效運作。使用 JavaScript 若要達到一樣的目的，
    有賴於你寫出功力。另外，CSS animation 在運作上可以適時的減少 frame 量或
    以其它技術減少資源消耗。

設定了動畫的時間資訊之後，必須要設定動畫漸變的過程。
這可以藉由建造兩個或更多的關鍵影格來達到目的 (使用 @keyframes )。
關鍵影格描述了該元素在漸變過程中的外觀。
因為動畫漸變時間已經在 CSS style 中被定義(如上表格)，
所以關鍵影格使用 "完成度百分比" (percentage)
來指出他們會在整個漸變流程中的哪個時間點出現。
0% 代表他是整個動畫的起點，而 100% 指出他是整個動畫的結束點。
這兩個特殊時間點一定要被定義，如此一來瀏覽器便知道該如何產生使用者定義的動畫。
也可以使用 from 表示 0%，to 表示 100%。
當然也可以在動畫轉變過程中，增加更多的關鍵影格。

參數名稱功能
animation-delay定義元素讀取完畢到動畫開始的間隔時間。
預設 0，單位 s 或 ms。
animation-direction定義是否動畫播放完畢後將會反向播放。
reverse、alternate、alternate-reverse、(預設值)。
animation-duration定義動畫完成一次週期的時間。
預設 0，單位 s 或 ms。
animation-iteration-count定義動畫重複的次數。
n(正整數，預設1)、infinite。
animation-name定義關鍵影格 @keyframes 的名字。
animation-play-state控制動畫的播放狀態。
running (預設值)
pause
animation-timing-function定義動畫轉變時時間的加速曲線。
linear、ease-in、ease-out、ease-in-out、step-start、step-end、
steps(int,start/end)、cubic-bezier(n,n,n,n)、ease(預設值)。
animation-fill-mode定義元素在動畫播放外(動畫開始前及結束後)的狀態。
forwards、backwards、both、none。(預設值)

範例
CSS 碼html 碼效果
#xx {
      height: 100px;
      background: #41D2F2;
      animation:kk 2s ease-in-out infinite both;
}
@keyframes kk{
      0% {width:100px}
      50% {width:200px;}
      100% {width:100px}
}		<div class="container">
<div id="xx"></div>
</div>

參考網址
oxxo studio