CSS linear() 関数

構文

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

引数

この関数は、アニメーションのタイムラインにおける進行点を表す、次の値のうちの 2 つ以上を受け入れます。

<number>

アニメーションまたはトランジションの再生時間における、ある時点を表します。 少なくとも 2 つの値を指定する必要があります。 0 の値は遷移の開始を表し、 1 の値は終了を表します。 0 から 1 の範囲外の値も指定できます。

<percentage> 省略可

アニメーションのタイムラインで進行が <number> に達したときを示します。 最初の数値と最後の数値を除き、任意の <number> の後に指定でき、最大 2 つの数値を指定できます。 2 つのパーセント値が指定された場合、それらは停止の長さを定義します。最初のパーセント値はアニメーションまたはトランジションの開始点を示し、 2 つ目のパーセント値はその区間の終了点を示します。 <percentage> 値が指定されていない場合、進行値はタイムラインに沿って均等に配置されます。

解説

linear()関数は、指定された点の間を直線的に補間処理することで、複雑なアニメーションやトランジションを簡略化することができます。 linear()関数の典型的な使用法は、多くの点を指定して任意の曲線を近似することです。

linear() 関数は、指定した 2 点間を一定の割合で推移する遷移を作成します。 例えば、 linear(0, 0.25, 1) は、0、0.25、1の 直線的な経由点ができます。 アニメーションは、点 0 から開始し、 0.25 まで直線的に移動し、その後、 1 まで直線的に続けられます。 パーセント値を指定しませんので、各区間には同じ再生時間 (50%) が使用されます。つまり、 0 から 0.25、0.25 から 1 です。

既定では、経由点は等間隔です。例えば、 5 つの経由点がある場合、再生時間の 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 で有効です。

/* 3つの等分の進行点 */
linear(0, 0.25, 1)

/* パーセント値による独自のタイミング */
linear(0, 0.5 25% 75%, 1)

以下の linear() の定義は無効です。

/* 2 つ以上の引数が必要 */
linear(0.5)

/* パーセント値は昇順でなければならない */
linear(0, 0.25 80%, 0.5 60%, 1)

/* 値は数値でなければならない */
linear(start, middle, end)

仕様書

ブラウザーの互換性

関連情報

• 他のイージング関数: cubic-bezier() と steps()
• CSS イージング関数モジュール
• linear() easing generator - Jake Archibald