直感的にCSSのイージングを作成できるサイト cubic-bezier
直感的にCSSのイージングを作成できるサイト cubic-bezier

直感的にCSSのイージングを作成できるサイト cubic-bezier

CSSアニメーションを作成していて、ただ移動するだけでなくイージングをつけたいなと思っていた時、直感的にイージングを作成できるサイトがありましたのでご紹介します。

操作イメージ

操作している様子をアニメーションにしてみたのでご確認ください。ドラッグ&ドロップと時間を設定するだけで簡単にイージングのコードが生成されます。

cubic-bezier アニメーション

この様にして、自分が気に入ったイージングコードを生成します。

CSSアニメーションへの実装

気に入ったイージングコードを生成したら、コードをコピーして、CSSファイルに記載します。

cubic-bezier.com

コピーしたら、CSSアニメーションの部分に以下のように書き加えると、生成したイージングの様なアニメーションが完成します。

.hogehoge {
	transition-timing-function: cubic-bezier(.17,.67,.67,.51);
}

以上、簡単にCSSアニメーションにイージングをつける方法でした。