5.9 漸變函式 animation-timing-function

animation-timing-function 說明

透過使用 animation-timing-function ，可以控制動畫效果的速度曲線，背後的原理是 cubic-bezier。

timing-function 有七種模式：

• ease：這是預設。相當於 cubic-bezier(.25, .1, .25, 1)

• linear：相當於 cubic-bezier(0, 0, 1, 1)

• ease-in：相當於 cubic-bezier(.42, 0, 1, 1)

• ease-out：相當於 cubic-bezier(0, 0, .58, 1)

• ease-in-out：相當於 cubic-bezier(.42, 0, .58, 1)

• cubic-bezier(n, n, n, n)

• steps(int, start | end)

1、timing-function： ease、linear

• ease：低速 → 加快 → 減速至結束。這是預設值。

• linear：速度保持一致。

ease 與 linear 的 timing-function

範例：

2、timing-function：ease-in、ease-out、ease-in-out

• ease-in：以低速開始。

• ease-out：以低速結束。

• ease-in-out：以低速開始，也以低速結束。

ease-in、ease-out、ease-in-out 的 timing-function

範例：

3、cubic-bezier(x1, y1, x2, y2) 函式

像上述的 ease、linear、ease-in、ease-out、ease-in-out 等，都是別名，其實背後都是透過 cubic-bezier() 函式來達成。

這裡有兩個很棒的網站：

• 自訂曲線：自行建立曲線，來創造動畫不同的執行速度。

• Easing Functions：這網站列出很多已經建好的函式形式，可以直接套用。

例如 linear，我們其實也可以用以下來代替(相當於 cubic-bezier(0, 0, 1, 1))：

animation-timing-function: cubic-bezier(0, 0, 1, 1);

所以透過 cubic-bezier() 函式 ，可以自訂任何想要的動畫執行速度。請多加利用上面的兩個網站。

4、steps(int, start | end) 函式

這會以跳躍式的方式來執行，第一個參數(steps)是一個正整數，表示有幾個間隔；而第二個參數(position)可設定 start 或 end(若沒有提供的話，預設是 end )，來看看範例來瞭解其中差異：

想法：如果是 start，就是一開始的位置會在跳第一次的尾端。(方便記憶)

範例：

animation-timing-function 與 @keyframes 的關係

先觀察一個極端的例子： cubic-bezier(1, 0, 1, 1)

範例 1

@keyframes move {
  0% {
    left: 0;
  }
  100%{
    left: calc(100% - 100px);
  }
}

範例 2

加上 50% 的 keyframes：

@keyframes move {
  0% {
    left: 0;
  }
  
  /* 時間一半的時候，移到正中間 */
  50% {
    left: calc(50% - 50px);
  }
  
  100%{
    left: calc(100% - 100px);
  }
}

結論：每加上一個 keyframe ，例如上例的 50% ，那從 0% 到 50% 就進行一個完整的 animation-timing-function。從 50% 到 100% 就進行一個完整的 animation-timing-function。