アヒルのおもちゃ
アヒルのおもちゃ

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

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

操作イメージ

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

cubic-bezier アニメーション

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

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

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

cubic-bezier.com

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

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


JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利