CSS3 のみで円周上を周回運動(circular motion)するアニメーション
CSS3 のみで円周上を周回運動(circular motion)するアニメーション
円の大きさを決めたら、コンテンツの大きさが半径で決まり、 円周上の位置などが% 指定で相対的に決まるようなものを作ってみました。
衛星のような周回運動
回転するが、180[deg] 回ると逆さになりコンテンツが見づらいと思うので、 以下にコンテンツ固定の周回運動をつくってみました。
コンテンツ固定の周回運動
コンテンツ固定で円周上4点が周るものを作ってみる。
transition:translate(), rotate() を組み合わせる場合
各コンテンツを原点に配置に配置し、 translate を使って各円周上に配置させるのでわかりやすい。 しかし、translate させる位置がそれぞれとなるので、 @keyframes がコンテンツごとに必要になってしまう。。
position: absolute, transition-origin を駆使する場合
@keyframes が1つで済むが、親要素用の div タグが余計に必要。
これの面白いところは、親要素を衛星のように周回運動させておくと、 子要素も同じ運動しているので、全く同じ運動を reverse で 逆回転させると、慣性の法則のように止まって見えるのを利用しています。
top のみ親要素にborderを付けています。
まとめ
もっと良い書き方あったら教えて下さい。
