搭給賀～今天想來試做看CSS Animation，常常看到有人在講animation，就是透過css來做出動畫效果啦～是不是很酷！可以讓原本只是更改外觀的樣式變成動起來喔！於是就趁這次鐵人文章來學習及練習如何使用。

開頭，起手：使用關鍵影格@keyframes

@keyframes ani ->ani自定義名稱，下面會有屬性講解
  from
    left: 0
  to
    left: 100%

from（開始）跟to（結束）可以使用％數作為代替：

from（可以使用0％數代替）代表動畫時間的0%

to（可以使用100％數代替）代表動畫時間的100%

@keyframes ani
  0%
    left: 0
  50%
	可自訂樣式...	
  100%
    left: 100%

可以變成以上這樣～有發現中間插入了一個50%的關鍵影格位置嗎？代表你可以根據自身需求去設置多個位置！

這個codepen是一開始的基礎板，可以先跟著做簡單的概念。

https://codepen.io/cinj/pen/bGpOvdM

1.先設置html,body的css背景樣式

2.設置白色方塊，並用絕對定位

3.設置裡面移動的方塊樣式，設定相對定位

4.起手式，動畫影格@keyframes

先做到上面的步驟，再把以下屬性閱讀完畢來開始做動畫效果。

再來了解ＣＳＳ動畫屬性有以下幾種：

animation-name：動畫名稱,ex: ani 自訂義

animation-duration：動畫持續的時間,ex: 1s

animation-delay：動畫延遲播放時間,ex:2s / -2s

有時候不想要他一進畫面就執行，設置2s代表2秒後開始執行動畫，設置-2s代表進入網頁前已開始執行2秒（像快轉概念。

animation-iteration-count：動畫播放次數，可設定播放幾次，如果要重複播放就寫infinite。

animation-direction：動畫播放方向。

• reverse 為反向播放
• alternate正播一次、反播一次
• alternate-reverse為alternate的相反

animation-fill-mode：動畫播放前後模式。

• both 可讓畫面往前後填補
• forwards 動畫結束後，保持在最後一個影格狀態
• backwards 動畫結束後，保持在第一個影格狀態（其實跟none預設值效果一樣）

animation-play-state：動畫播放或暫停狀態

• running：預設值，動畫播放
• paused 動畫暫停

當學完以上的屬性之後，你會覺得要寫這麼多看起來會很雜啊！

別怕～簡寫寫法來了：

簡寫：

animation：name / duration / delay / iteration-count / direction

＊注意：
當只給一個時間的話是持續時間

animation: ani 2s ->持續時間

給兩個時間的話前面是持續，後面是delay

					 / 持續,delay /
animation: ani 2s 1s

最後，看完上面的屬性後，就可以跟著我今天學習的codepen做做看了！今天先學基本款，明天預備練習一個比較炫砲的動畫：）

接續上面codepen所完成的：

https://codepen.io/cinj/pen/eYZbMqz