[筆記] 網頁CSS動畫─color transition

最近開始在code school學用CSS設計網頁動畫的一些方法，這裡主要說明如何製作顏色變換的動畫效果(color transition)。

完成的結果像是這樣：

See the Pen color transition by PJCHEN (@PJCHENder) on CodePen.

首先，我們要先製作一個按鈕，現在有很多網頁提供快速製作按鈕的服務，像是CSS Button Generator就是個不錯的選擇。

STEP：HTML部分

<button class = 'btn color_transition'>Click Now</button>

我們先用button這個tag製做一個按鈕，裡面包含兩個class，btn和color_transition。btn這個class是我們要來美化這個按鈕時所用到的css；color_transition則是用來說明如何製作顏色動畫效果的。

STEP：CSS部分

再來CSS的部分，我們用CSS Button Generator先繪製一個簡單的按鈕。

.btn {
  -webkit-border-radius: 11;
  -moz-border-radius: 11;
  border-radius: 11px;
  font-family: Arial;
  color: #FFFFFF;
  font-size: 20px;
  padding: 15px 30px 15px 30px;
  text-decoration: none;
  border: none;
 }

其中border-radius是用來讓按鈕有圓弧形的效果；padding則是內邊框，用來做為按鈕的內部空間。

STEP：製作顏色動畫(color transition)

在製作顏色動畫之前，我們會先用一般我們在css很常用的偽元素:hover，指的是當滑鼠移過時要出現的效果
所以我們可以把按鈕背景顏色的程式碼成如下：

 /*原本的顏色*/
 .color_transition {
  background-color: #00A0D6;
 }
 /*滑鼠移過的效果*/
 .color_transition:hover {
  background-color: #007DA7;
 }

這時候當滑鼠移過時，就會出現一般的變色效果。
一般變色的效果和動畫的效果，最主要的差別是在於時間差，一般的變色是立即變色，動畫的效果則是漸漸改變顏色。
接下來，我們就來增加動畫的效果，動畫效果的關鍵字是transition。
基本的用法是這樣：

transition後第一個放的是想要有動畫效果的屬性，後面是執行這個動畫的時間，所以我們只要把程式碼改成這樣，就能夠有背景顏色的動畫效果顯示：

 .color_transition {
  background-color: #00A0D6;
  transition: background-color 0.4s;
 }

如果有多個屬性想要改變，只要用逗號加以隔開即可：

例如，我想要同時改變背景顏色和文字顏色，我可以寫成

transition: background-color 0.4s, color 0.4s;

如果你想要針對所有的屬性都套用動畫效果，則可以打一個all，像是這樣

transition: all 0.4s;

實際上，完整的動畫屬性包含四個部分：

除了duration之外，其它都有預設值，property的預設值是all、timing-function的預設值是ease、delay的預設值是0。

STEP：幫各程式碼加上前輟字元

由於各瀏覽器解讀CSS的方式不同，最後我們都需要加上前輟詞(prefix)，以確保各版本的瀏覽器都能正確解讀。

copy from codeschool

對於各css屬性在不同瀏覽器支援的情形可以參考：caniuse.com這個網站。

再來看一次我們的結果吧！

See the Pen color transition by PJCHEN (@PJCHENder) on CodePen.

以上內容均為學習自Code School: Adventures in web animations之學習筆記