linear()
Baseline 2023Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
構文
linear(0, 1)
linear(0, 0.25, 1)
linear(0, 0.25 75%, 1)
linear(0, 0.5 25% 75%, 1)
引数
この関数は、アニメーションのタイムラインにおける進行点を表す、次の値のうちの 2 つ以上を受け入れます。
-
アニメーションまたはトランジションの再生時間における、ある時点を表します。 少なくとも 2 つの値を指定する必要があります。
0の値は遷移の開始を表し、1の値は終了を表します。0から1の範囲外の値も指定できます。 -
アニメーションのタイムラインで進行が
解説
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() 関数は 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)
仕様書
| Specification |
|---|
| CSS Easing Functions Level 1 # the-linear-easing-function |
ブラウザーの互換性
関連情報
- 他のイージング関数:
cubic-bezier()とsteps() linear()easing generator by Jake Archibald