聊聊CSS 緩動函數的新成員linear()

CSS 緩動函數是一種用於控制 CSS 動畫過渡效果的函數，可以讓動畫變得更加自然。這篇文章將介紹一種新的 CSS easing function，即 linear()，它可以模擬出更復雜的緩動效果，文中demo請在chrome 113+中觀看。

什麼是 easing function？

在動畫中，有一種叫做“緩動效果”的技術，它可以讓動畫變得更加自然。在實現緩動效果時，通常會使用 easing function。easing function 是一種函數，它可以將動畫的進度（通常是一個 0 到 1 之間的數字）映射爲動畫的值。

在 CSS 中，可以使用 easing function 控制 CSS 動畫的過渡效果。在 CSS 中，可以使用 transition-timing-function 屬性來指定 easing function。例如：

.element {
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: linear;
}

在這個示例中，transition-timing-function 屬性的值爲 linear，這意味着動畫的過渡效果將呈現線性的變化。在動畫中，同樣有一個animation-timing-function屬性來控制動畫的緩動效果。除了 linear 這個關鍵字之外，還有linear, ease, ease-in, ease-out, ease-in-out等關鍵字，以及cubic-bezier(p1, p2, p3, p4), steps(n, )等函數。今天我們要說的是一種新的緩動函數 linear()，注意和前面的關鍵字 linear 區分。

linear緩動函數的語法

假設我們有一個動畫，要在3s內對一個div放大到原來的10倍：

linear(0, 1) //等同於關鍵字linear
linear(0, 0.9, 1)  // 0-1.5s 放到到9倍，1.5s-3s放大到10倍
linear(0, 0.5 20%, 0.8 60%, 1)  // 0-20%的時間 放到到5倍，20%-60%的時間放大到8倍，最後放大到10倍

畫出圖來分別是這樣的：

linear	圖
linear(0, 1)
linear(0, 0.9, 1)
linear(0, 0.5 20%, 0.8 60%, 1)

linear()模擬跳動效果

雖然我們在上面最多隻有4個關鍵點，但是linear函數可以接收更多的關鍵點參數來實現更復雜的動畫，比如跳動效果。如果你使用過animate.css 的 bounceInDown效果，會發現直接使用之前的CSS的緩動函數是比較難以實現的。在animate.css的實現裏面， 是使用一系列關鍵幀再加上cubic-bezier緩動函數來實現的：

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}

現在有了linear()緩動函數，我們可以在一個關鍵幀的情況下再結合linear緩動函數來實現:

linear(
    0, 0.063, 0.25 18.2%, 1 36.4%, 0.813, 0.75, 0.813, 1, 0.938, 1, 1
  );

上面的緩動函數對應的圖像如下：

很明顯，如果讓我們手寫這樣一個linear函數還是比較複雜的，好在有大佬幫我們做了一個生成工具：https://linear-easing-generator.netlify.app/

兼容性

最後來看看兼容性，目前在chrome 113+可用，暫時還不能用於生產，但兩年應該就可以愉快地使用了，本文完

參考文檔

• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
• https://web.dev/learn/css/animations/#animation-timing-function
• https://easings.net/zh-cn#
• https://cubic-bezier.com/#.17,.67,.89,.18
• https://linear-easing-generator.netlify.app/