ステップ・イージング生成ツール

ステップ・イージングはアニメーションの進捗度をステップ状に変化させます。アニメーションをコマ送りのように進行させるために使用できます。

ステップ数は“jump-none”である場合は“2”以上、そうでなければ“1”以上の整数値で指定します。

ステップの位置は6個のキーワードのいずれかで指定します。“jump-start”と“start”、“jump-end”と“end”は同じです。

定義済みのステップ・イージングを選択することもできます。

このツールではステップ数と所要時間は“999”まで入力できます。また、所要時間は小数第2位まで入力できます。

生成したステップ・イージングはCSSの“<step-easing-function>”値(キーワード値か“steps()”関数)、もしくは“animation”プロパティ、“transition”プロパティとして出力できます。

アニメーションを試してみるには再生ボタンをクリックしてください。アニメーションは拡大・縮小と水平移動の2種類を切り替えられます。