[CSS Animation] 9. 使用 animation-timing-function 來控制動畫的速度與加速度

透過使用 animation-timing-function ,可以控制動畫播放的速度與加速度,讓動畫效果變的更加生動,預設的屬性值為 ease,所以就先來瞭解 ease 的播放情況。

ease 與 linear 執行曲線

曲線圖如下:

ease 與 linear 的曲線( 圖片出自於 css-animations.io )
  • ease:屬於慢進 → 加快 → 減速至結束。
  • linear:從頭到尾速度皆保持相同。

以下範例分別是 animation-timing-function 套用 ease (預設) 與 linear 的執行情況:

ease-in、ease-out、ease-in-out 執行曲線

曲線圖如下:

ease-in、ease-out、ease-in-out 的曲線 (圖片出自於 css-animations.io )
  • ease-in:慢進 → 加速至結速。
  • ease-out:快進 → 減速至結束。
  • ease-in-out:慢進 → 加速 →減速至結束。

以下範例分別是 animation-timing-function 套用 ease-in 與 ease-out 與 ease-in-out 的執行情況:

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

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

這裡有兩個很棒的網站:

  • 自訂曲線:自行建立曲線,來創造動畫不同的執行速度。
  • Easing 函數:這網站列出很多已經建好的函式形式,可以直接套用。

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

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

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

steps(steps_number, direction) 函式

這會以跳躍式的方式來執行,第一個參數 steps_number 是一個整數,表示要跳幾次到最終狀態;而 direction 可設定 start 或 end,來看看範例來瞭解其中差異:

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of