ベジェ曲線を使ってCSSでアニメーションさせてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

どうも、フロントエンドエンジニアのはっちゃんです。 暑い日が続いて、もう本格的に夏ですね。夏季休暇はどこいこうかなー。 ……と、言っても、なんも予定ないからとりあえず卓球します。 さて今回のブログは、「ベジェ曲線をつかってCSSでアニメーションさせてみた」ということなんですが、案件で「弧線を描いてキャラクターを動かす」という要件があったので、その工程をまとめた内容になります。 今回のゴール オブジェクト（サンプルは球体）が目標に向かって繰り返し放物線を描きながら落ちるアニメーションを実装します。 考え方 オブジェクト一つ一つをDOMで用意し、それぞれをanimationプロパティでアニメーションさせます。その際の放物線の動きを計算する関数をSass（SCSS）で作り、引数に渡して繰り返し実行します。 値を受け取って出力する側の関数をSass（SCSS）で書いてみる 記事内の下記JS関数を参