steps()

構文

/* 様々な間隔 */
steps(2, end)
steps(4, jump-end)
steps(12, end)

/* 様々なジャンプ位置 */
steps(3, jump-start)
steps(3, jump-end)
steps(3, jump-none)
steps(3, jump-both)

引数

この関数は、次の引数を受け入れます。

<integer>

間隔または「段階」の等間隔の数値を表します。 2 つ目の引数が jump-none である場合を除き、 0 より大きい正の整数でなければなりません。その場合、 1 より大きい正の整数でなければなりません。

<step-position>

値間のジャンプが発生するタイミングを指定します。 省略した場合は、既定では end となります。 利用可能なキーワード値には、次のものがあります。

jump-start または start

アニメーションが始まるときに最初の段階が現れることを示します。

jump-end または end

アニメーションが終わるときに最後の段階が現れることを示します。

jump-none

最初のジャンプも最後のジャンプも現れないことを示します。

jump-both

最初のジャンプと最後のジャンプの両方が現れることを示します。

解説

steps() 関数は、アニメーションの再生時間を等間隔に分割します。 例えば、 steps(4, end) はアニメーションを 4 つの等間隔に分割し、各間隔の終わりに値が変化します。ただし、最後の変化はアニメーションの終わりに発生します。

アニメーションに複数の区間がある場合、指定した数値は各区間に適用されます。例えば、アニメーションに 3 つの区間があり、 steps(2) を使用している場合、合計 6 段階となり、各区間に 2 段階ずつ割り当てられます。

次の画像は、ジャンプが発生した際の様々な <step-position> 値の影響を示しています。

steps(2, jump-start)  /* または steps(2, start) */
steps(4, jump-end)    /* または steps(4, end) */
steps(5, jump-none)
steps(3, jump-both)

形式文法

<steps()> = 
  steps( <integer> , <step-position>? )  

<integer> = 
  <number-token>  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

例

steps() 関数の使用

以下の steps() 関数は有効です。

/* 5 段階で最後にジャンプ */
steps(5, end)

/* 2 段階で最初にジャンプ */
steps(2, start)

/* 第 2 引数は既定値を使用 */
steps(2)

以下の steps() 関数は無効です。

/* 第 1 引数は実数ではなく <integer> でなければならない */
steps(2.0, jump-end)

/* 段階の数値は正でなければならない */
steps(-3, start)

/* 段階の数値は 1 以上でなければならない */
steps(0, jump-none)

仕様書

ブラウザーの互換性

関連情報

• その他のイージング関数: cubic-bezier() および linear()
• CSS イージング関数モジュール
• 階段関数 （ウィキペディア）