cssを使って円軌道を描く2つの方法【楕円もあるよ】 | GUARDIAN Creative BLOG | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

これはシンプルに、transform:rotate()を使いアニメーションさせるだけですね。

アニメーションはkeyframesを使っています。

下記はhtml,cssのサンプルコードです（省略して部分的に掲載しています）

ただ、これだけだとハチさんもひっくり返ってしまってますね。。。

なので、ハチさん自身を四角形の回転と逆向きに回転させましょう。

下記のcssを追記しました。

惑星の自転と公転みたいに、２つの回転が組み合わさっています。

ハチさんが自転する速度は、四角形の回転と同じにします。

このように2種類のrotateを使うと簡単に円の軌道を再現することができました。

cssでtranslateを使う際、複数の動きを組み合わせるとより複雑な動きをさせることができます。

今回は青い四角のbox要素と、box要素に擬似要素の::beforeを使ってハチの画像を表示させました。

青い四角はtranslateXで左右に動き、ハチはtranslateYで上下に動きます。

この二つの動きが組み合わさることで、下記のような動きをします。

これだと円軌道ではないですね💦

なんだか動きが直線的です。

円を描くには曲線の動きが必要です。

さて、これをどうしたら曲線の動きにできるでしょうか？

Web業界でコーダーをしているみなさんは、いったん立ち止まって考えてみてくださいね！

さて正解は

ease-in、ease-outを組み合わせて使う

でした！

ease-in、ease-outというと、普段cssをよく使う人でしたらよくご存知ですよね。

アニメーションの動きに緩急をつけるパラメーターなのですが、二つの動きを組み合わせた際に使うととても滑らかな動きをしてくれるようになります。

百聞は一見にしかず。

boxにease-inを、ハチにease-outをつけた動きがこちら↓です。

動きは滑らかになりましたが、これまた円軌道ではないですね。。。

右下と左上は円に沿って動いていますが、左下と右上の動きは円に対して反対向きに動いていそうです。

どうやら左下と右上だけease-in、ease-outの組み合わせを逆にすれば実現できそうですが？？

それでもできるとは思うのですが、実は箱とハチの動き方を変えることでも可能です！　↓↓↓

またwidthの値を変えることで、楕円の動きを作ることも可能です。

keyframesの値を適当に変えてしまうと、こんなトリッキーな動きもできます😆

いかがでしょうか。cssできれいな円が描けたと思います。

ease-in,ease-outの組み合わせで、cssで円が描けるのはちょっと意外ですよね。

最後に、今回使用したhtml、cssのコードを掲載しておきます。

円の動きを使いたい方はぜひご利用ください( ´∀｀)

html,cssのコードはこちら