具体的な適用例を確認しながらcubic-bezier()の値をコピー・調整できる「Easings」

具体的な適用例を確認しながらcubic-bezier()の値をコピー・調整できる「Easings」

「Easings」は、CSSでアニメーションを表現する際などに利用するcubic-bezier()の値を出力するジェネレータで、easeInSineeaseOutSineといった代表的なイージング関数に加え、任意で調整した動きの実装値も出力してくれます。

Easings

上のイメージのように左側で各種イージングを選択できます。
代表的なイージング関数であるeaseIn系・easeOut系・easeInOut系の全24が用意されており、それぞれ選択すると左側下部にcubic-bezier()での値が出力されます。
また、設定部分上部にある「Custom」タブを選択すれば、ドラッグ操作または数値指定で任意でイージングを作成してcubic-bezier()値を出力させることもできます。

このジェネレータの大きな特徴がその選択・作成したイージングの確認方法で、よく見る他のイージングのチートシートやジェネレータだと動きをグラフや簡易的な要素が動くもので確認しますが、「Easings」では具体的な適用例で確認することができ、任意でDurationやOffsetを適用した場合も確認できるようになっています。

Easingsの各種デモイメージ

デフォルトではカルーセルへ適用した際の動きを確認できますが、他にもサイドメニュー・スクロールジャック・ドロワー・モーダルが用意されています。

選択・作成したイージングはシェアすることも可能で、各種デモの下にある「Share」ボタン押下で出力されるURLを共有すれば他の人にもイージングの動きを共有できます。
これもクライアントに動きのイメージをいくつか提案する必要があるときなどに便利そうです。

Close the search window,
please press close button or esc key.