linear() はCSS関数で、点の間を均一の進行する遷移曲線を作成します。<easing-function> としては、補間処理が最初から最後まで一定の速度で起こる遷移を作成します。

構文

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()
• linear() easing generator by Jake Archibald