[筆記] CSS動畫Animation --- @keyframes

在學習CSS動畫的過程中，不能不提@keyframes這個屬性，讓我們來看一下這個屬性可以怎麼樣使用吧！

基礎範例

我們先來看一下最簡單的範例，製作出來的效果如下：

我們可以看到，這個方塊會有變色的效果，讓我們來看一下這段基礎的程式碼是什麼：

HTML的部分非常簡單，就是用一個div。

CSS的部分我們先設定該div的樣式，然後裡面會包含要執行動畫的名稱animation-name和執行動畫的時間animation-duration，這兩個部分都可以根據自己的需要設定。

接著就要來設定@keyframes的內容，在@keyframes後面要先輸入剛剛在div當中所寫的animation-name，然後就可以在"{ }"內設定要執行動畫的效果。

這裡用的from和to，表示在4s的期間內，從一開始(0%)到最後(100%)動畫的變化。

如果你希望動畫中間是有很多不同時間點的變化，可以不用from和to，而是直接使用百分比，像是這樣使用百分比也可以：

在上面的程式碼中，我們在div的地方同時加上position: relative，同時製造出移動的動畫效果！結果如下：

看看更多和animation有關的屬性

在上面的例子中，我們在div裡面使用了animation-name和animation-duration這兩個屬性，而animation其實還包含其他屬性可以使用，我們來看看！

animation-delay：這個動畫會延遲幾秒後才進行，例如，animation-delay: 5s，表示這個動畫會延遲5表後才執行。

animation-iteration-count：這個動畫會重複執行幾次，例如，animation-iteration-count: 4，表示這個動畫會重複執行4次後停止。如果我們希望這個動畫不斷循環不要停止的話，我們可以用infinite這個關鍵字，animation-iteration-count: infinite，表示這個動畫會無限次循環下去。

animation-direction：這個屬性可以指定動畫進行的方向，例如，上面的範例正方形是順時針移動，預設的值是normal，所以動畫就會隨順時針進行；如果你希望動畫是逆時針(反著時間順序)進行，則可以輸入reverse；另外，還有一個比較特別的值是alternate，當奇數次撥放時會照原本的時序，偶數次撥放時則會倒著時序撥放。

animation-timing-function：這個屬性是用來控制動畫執行過程中的速度變化，包含
ease，這是預設值，動畫一開始慢慢的，接著會漸漸加速，結束的時候再慢下來。
linear，動畫從開始到結束的過程都是一樣的速度。
ease-in，動畫開始的速度較慢。
ease-out，動畫結束的速度較慢。
ease-in-out，動畫的開始和結束時的速度較慢。
cubic-bezier(n,n,n,n)，自行定義動畫的速度。
各個不同的動畫速度效果可以參考W3Schools的這兩個範例：範例一、範例二。

animation簡寫

從上面的說明我們可以知道，完整的animation屬性還算不少：

如同其他css的屬性(例如，background)，animation也有縮寫的形式，寫法如下：

參考資料

W3School：CSS3 Animations