CSSアニメーションを作成していて、ただ移動するだけでなくイージングをつけたいなと思っていた時、直感的にイージングを作成できるサイトがありましたのでご紹介します。
操作イメージ
操作している様子をアニメーションにしてみたのでご確認ください。ドラッグ＆ドロップと時間を設定するだけで簡単にイージングのコードが生成されます。
この様にして、自分が気に入ったイージングコードを生成します。
CSSアニメーションへの実装
気に入ったイージングコードを生成したら、コードをコピーして、CSSファイルに記載します。
コピーしたら、CSSアニメーションの部分に以下のように書き加えると、生成したイージングの様なアニメーションが完成します。
以上、簡単にCSSアニメーションにイージングをつける方法でした。