2015年11月30日

[筆記] 網頁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之學習筆記

0 意見:

張貼留言