CSS Animation

簡介

網頁製作動畫最主流的形式，透過指定樣式數值的變化達到動畫的效果。又分成「轉場」與「動畫」兩種。

動畫的基本語法：

animation: 動畫名稱動畫長度時序函數重覆次數

可以用逗號分隔設定多組動畫。其中各個項目亦可使用單獨樣式來設定

樣式名	可能的值	用途
animation-name	動畫名稱	動畫名稱。利用 keyframe 設定 ( 描述於後 )
animation-duration	秒s	動畫長度
animation-repeat-count	數值	動畫重覆次數。設定為 infinite 則重覆無限次。
animation-timing-function	如右	可為下列值之一： ( 僅列舉部份 ) linear ease-in ease-out ease-in-out 或透過下列方式設定： cubic-bezier(a, b, c, d) 其中 a, b, c, d 各為介於 0 至 1 之間的數值。請參考此網頁

動畫名稱指定到一組透過 keyframes 關鍵字設定的動畫。一組 keyframes 內含多個時間點的樣式值，告訴瀏覽器當動畫播放進度到特定時間點時，樣式該如何決定。以下為一範例：

@keyframes {
  0% {
    color: black;
  }
  100% {
    color: white;
  }
}

試試看吧！

1. 使用 transform 搭配 transform-origin 與 animation 樣式做出吃豆人的開合動畫：

2. (bonus) 只會開合不夠，順便吃個豆吧！

轉場較動畫簡單，但通常需搭配程式碼控制。轉場搭配 transition 樣式，指定哪些樣式在數值變化時，以動畫轉場的方式表現。基本語法：

transition: 屬性名秒數時序函數

舉個例子來說，下例指定所有的 div 標籤，其顏色 ( color ) 樣式在改變時，做一秒的轉場動畫：

div {
  transition: color 1s linear;
}

可以用逗號分隔設定多組樣式，亦可使用 all 做為樣式名指定所有樣式變更都要做轉場：

div {
  transition: all 1s linear;
}

在 CSS Selector 的語法中，有些特別的語法並非對應到特定的標籤，而是對應到特定的動作。例如，以下的 Selector 只有在滑鼠移至 div 標籤上方時才會被觸發：

div:hover

這種選擇器我們稱之為「虛擬選擇器」( pseudo selector )。透過 :hover，我們可以為標籤在不同狀態下設定不同的樣式，例如下例設定紅色的連結在滑鼠移上時變為藍色：

a {
  color: #f00;
}
a:hover {
  color: #00f;
}

因為牽涉到樣式的變化，我們便可以利用 transition 樣式為他加上轉場效果：

a {
  color: #f00;
  transition: color 0.35s linear;
}
a:hover {
  color: #00f;
}

下方為有無轉場的效果範例，把滑鼠移到連結上方看看吧！

試試看吧！

1. 使用 :hover selector 搭配 transition 做出文字變色轉場效果

用鋁箔紙包住頭，才能抵擋她用腦波控制人

2. 接著，搭配 display: none 樣式，製作彈出框

用鋁箔紙包住頭，才能抵擋她用腦波控制人

唐鳳：就這樣被你增幅

3. 有空的話，再上個色、排個版吧

用鋁箔紙包住頭，才能抵擋她用腦波控制人

唐鳳：就這樣被你增幅

4. 太閒的話...

用鋁箔紙包住頭，才能抵擋她用腦波控制人

唐鳳：就這樣被你增幅