はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

CSS3 のみで円周上を周回運動(circular motion)するアニメーション

CSS3 のみで円周上を周回運動(circular motion)するアニメーション

円の大きさを決めたら、コンテンツの大きさが半径で決まり、 円周上の位置などが% 指定で相対的に決まるようなものを作ってみました。

衛星のような周回運動

codepen.io

回転するが、180[deg] 回ると逆さになりコンテンツが見づらいと思うので、 以下にコンテンツ固定の周回運動をつくってみました。

コンテンツ固定の周回運動

コンテンツ固定で円周上4点が周るものを作ってみる。

transition:translate(), rotate() を組み合わせる場合

各コンテンツを原点に配置に配置し、 translate を使って各円周上に配置させるのでわかりやすい。 しかし、translate させる位置がそれぞれとなるので、 @keyframes がコンテンツごとに必要になってしまう。。

codepen.io

position: absolute, transition-origin を駆使する場合

@keyframes が1つで済むが、親要素用の div タグが余計に必要。

これの面白いところは、親要素を衛星のように周回運動させておくと、 子要素も同じ運動しているので、全く同じ運動を reverse逆回転させると、慣性の法則のように止まって見えるのを利用しています。

codepen.io

top のみ親要素にborderを付けています。

まとめ

もっと良い書き方あったら教えて下さい。

広告を非表示にする