“steps()”関数

“steps()”関数

“steps()”関数は入力値を指定されたステップ数の階段状に変化させて出力するイージング関数です。

“<step-easing-function>”値として使用することができ、“animation-timing-function”プロパティや“transition-timing-function”プロパティでアニメーションの進行速度を制御することができます。

引数はステップ数、ステップ位置の順にコンマ(“,”)で区切って記述します。

1個目の引数は値が経由するステップ数を“<integer>”値で指定します。2個目の引数が“jump-none”である場合は“2”以上、そうでなければ“1”以上の整数値を指定します。ステップの間隔は等間隔です。

2個目の引数は値が経由するステップの位置(“<step-position>”)を指定し、以下の6個のキーワードのいずれかで指定します。この引数は省略可能で、省略された場合は“end”として扱われます。

ステップ位置ごとのグラフ

以下はステップ数が“3”の場合の出力値の変化を表したグラフです。

使用例

.sample-box-1 { animation-timing-function: steps(3,jump-start);}
.sample-box-2 { animation-timing-function: steps(3,jump-end);}
.sample-box-3 { animation-timing-function: steps(3,jump-none);}
.sample-box-4 { animation-timing-function: steps(3,jump-both);}
.sample-box-5 { animation-timing-function: steps(3,start);}
.sample-box-6 { animation-timing-function: steps(3,end);}


"steps(3,jump-start)"

"steps(3,jump-end)"

"steps(3,jump-none)"

"steps(3,jump-both)"

"steps(3,start)"

"steps(3,end)"

＊マウスをホバーしている間にアニメーションが適用されます

仕様書

定義されている仕様書

steps()