8.9-animation-timing-function.md

7.9 animation-timing-function

animation-timing-function 說明

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

animation-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 ease、linear

• ease：低速 → 加快 → 減速至結束。這是預設值。
• linear：速度保持一致。

示意圖：

例：(一個元素從左邊跑到右邊)

{% embed url="https://codepen.io/carlos411/pen/eYbmdMe" %}

2 ease-in、ease-out、ease-in-out

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

示意圖：

例：

{% embed url="https://codepen.io/carlos411/pen/jOXEMxy" %}

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，就是一開始就要跳。

示意圖：

例：

{% embed url="https://codepen.io/carlos411/pen/VwqYKGO" %}