アヒルのおもちゃ

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

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

操作イメージ

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

cubic-bezier アニメーション

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

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

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

cubic-bezier.com

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

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


著者について

Junji Yamamoto

広島県広島市育ち、現在岡山でWeb制作の仕事をしています。主に「Web関連で勉強したこと、役立つアイディア」をテーマにした内容を備忘録としてブログに書いています。大学卒業後は勤務している会社のWeb制作を担当。小規模サイトから大学公式サイトの制作・運営などに携わっています。

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