See the Pen 100DaysCss #02 #plus by Cathy (@smile25896) on CodePen.

這次的題目主要練習的是CSS動畫，讓一個按鈕點下去透過transform: translate() rotate()做出位移和旋轉的動畫。
比較難的是動畫的加速function，用到了關於貝茲曲線cubic-bezier的屬性。

學習重點

製作動畫：animation 和 keyframes
貝茲曲線：cubic-bezier

製作動畫：animation 和 keyframes

keyframes

keyframes為關鍵影格，可以設定在某個時間點的css狀態。

例如下面這個範例，則設定開頭時rotate為0deg，結束時rotate為90deg。

@keyframes rotate {
  /* 開頭 */
  from {
    transform: rotate(0deg);
  }
  /* 結尾 */
  to {
    transform: rotate(90deg);
  }
}

也可以依據時間的百分比設定，如下：

@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

animation

接著只要將關鍵影格套入到css的animation屬性中，就可以讓目標轉動

div{
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

animation有相當多的屬性可以調整

屬性名稱	說明	預設值	其他設定值
animation-name	關鍵影格的名稱。
animation-duration	動畫播放一次週期的時間。	0
animation-timing-function	動畫的加速函式。	ease	linear、ease-in…
animation-delay	動畫延遲開始的時間。	0
animation-iteration-count	動畫播放的次數	1	infinite：無限
animation-direction	動畫播放的方向	normal
animation-fill-mode	動畫播放前後的模式	none
animation-play-state	動畫播放的狀態	running	paused

完整說明可以參考這裡

也能寫成縮寫：

1	animation:name duration \| timing-function \| delay \| iteration-count \| direction \| fill-mode \| play-state;

本題應用

本題的上下兩條線以及中間的線，做的事情不太一樣

上下兩條線動畫可以拆解成兩個部分，

透過transform: translate();將上下兩條線位移至中間
再用transform: rotate();旋轉線條

將這兩個部分各分配50%的動畫時間，keyframes如下：

@keyframes animate-line-1 {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 23px) rotate(0);
  }
  100% {
    transform: translate(0, 23px) rotate(315deg);
  }
}

@keyframes animate-line-3 {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, -23px) rotate(0);
  }
  100% {
    transform: translate(0, -23px) rotate(225deg);
  }
}

而中間那條線不需要位移和旋轉，單純透過transform: scale();讓他變小後消失，另外在調整透明度讓它消失得更自然一點，keyframes如下：

@keyframes animate-line-2 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

由「X」變回「三」的動畫則是反過來就好了，不另贅述。

貝茲曲線：`cubic-bezier`

animation-timing-function

剛剛介紹的animation-timing-function動畫加速函式，如果沒有設定的話預設是ease，在動畫開頭先用比較緩和速度執行，之後漸漸加快直到動畫結尾再慢慢降下速度。視覺上會有「慢-快-慢」的效果。

如果要讓「三」變成「X」時有快到慢的效果，而反過來當「X」變回「三」時則有慢到快的效果時，最簡單的方式是設定ease-out（漸出）與ease-in（漸入）。

animation-timing-function完整的說明及參數可以參考這裡

cubic-bezier

若希望動畫的速度變化比ease-out、ease-in更強烈的話，就可以透過cubic-bezier手動設定動畫的加速度函式。
animation-timing-function預設的幾種加速函式畫成貝茲曲線圖會是這個樣子：

貝茲曲線有兩個控制點，調整控制點的位置則可以讓我們畫出曲線
cubic-bezier(x1, y1, x2, y2)：四個參數分別是(控制點1的x軸, 控制點1的y軸, 控制點2的x軸, 控制點2的y軸)
若不清楚控制點是什麼的人，建議可以到cubic-bezier.com上玩玩看會更了解。

Menu Icon Demo