linear()

語法

linear(0, 1)
linear(0, 0.25, 1)
linear(0, 0.25 75%, 1)
linear(0, 0.5 25% 75%, 1)

引數

該函式接受兩個或多個以下值，這些值代表動畫時間軸上的進度點。

<number>

表示動畫或過渡持續時間中的一個時間點。必須至少指定兩個值。值 0 表示過渡的開始，1 表示結束。也允許使用 0 到 1 範圍之外的值。

<percentage> 可選

表示動畫時間軸中何時達到進度 <number>。它可以在除了第一個和最後一個以外的任何 <number> 值之後指定，並且最多可以有兩個值。如果指定了兩個百分比值，它們定義了停止的長度：第一個百分比表示該段動畫或過渡的起點，第二個百分比表示終點。如果沒有指定 <percentage> 值，則進度值會沿時間軸均勻分佈。

描述

linear() 函式允許透過在指定點之間進行線性插值來近似複雜的動畫和過渡。linear() 函式的典型用途是提供許多點來近似任何曲線。

linear() 函式建立的過渡在指定點之間以恆定速率進行。例如，linear(0, 0.25, 1) 有 0、0.25 和 1 的線性停止點。動畫從點 0 開始，線性移動到 0.25，然後繼續線性移動到點 1。由於沒有指定百分比，每個段（即從 0 到 0.25 以及從 0.25 到 1）都使用相同的持續時間（50%）。

預設情況下，停止點是等距的。例如，如果有五個停止點，它們將分別發生在持續時間的 0%、25%、50%、75% 和 100%。你可以使用可選的百分比值來提供更精細的控制，定義每個進度值何時發生，從而實現更受控的過渡進度。

考慮一個持續時間為 100 秒、變化量為 100 畫素的動畫。我們來看一個動畫緩動指定為 linear(0, 0.25 75%, 1) 的場景。在這種情況下，動畫在前 75 秒（持續時間的 75%）內進展 25 畫素（總變化的 25%）。剩餘的 75 畫素在動畫的最後 25 秒內應用。

對於相同的動畫，假設緩動函式指定為 linear(0, 0.5 25% 75%, 1)。這裡，動畫在 25 秒（持續時間的 25%）內達到 50 畫素（總變化的 50%），並在此停留 50 秒（持續時間的 75% - 25%）。然後剩餘的 50 畫素在持續時間的最後 25 秒內應用。請注意，linear(0, 0.5 25% 75%, 1) 等同於 linear(0, 0.5 25%, 0.5 75%, 1)。

正式語法

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

示例

使用 linear() 函式

以下 linear() 函式可在 CSS 中有效使用：

/* Three evenly distributed progress points */
linear(0, 0.25, 1)

/* Custom timing with percentage values */
linear(0, 0.5 25% 75%, 1)

以下 linear() 定義無效：

/* At least two parameters are required */
linear(0.5)

/* Percentages must be in ascending order */
linear(0, 0.25 80%, 0.5 60%, 1)

/* Values must be numbers */
linear(start, middle, end)

規範

瀏覽器相容性

另見

• 其他緩動函式：cubic-bezier() 和 steps()
• CSS 緩動函式模組
• Jake Archibald 的 linear() 緩動生成器