円周上を移動するアニメーションを実装する

以前にJavaScriptを使って円周上を移動する処理を別の記事で紹介しましたが、今回はCSSで円周上を移動する処理を実装してみます。

サンプルコード

まずはHTMLですが、.wrapperが表示確認用に円を描画する要素、.circle-frameがCSSで動かす要素、.circleが円周上に配置する要素になります。

<div class="wrapper">
	<div class="circle-frame">
		<div class="circle"></div>
	</div>
</div>

次にCSSです。

.wrapper {
	position: relative;
	width: 200px;
	height: 200px;
	border: #000 2px solid;
	border-radius: 100px;
}
.circle-frame {
	position: absolute;
	top: -5px;
	left: calc(50% - 5px);
	width: 10px;
	height: calc(50% + 5px);
	transform-origin: center bottom;
   	transform: rotate(0deg);
    animation: rotate 10s linear infinite;
}
@keyframes rotate {
    0% {
    	transform: rotate(0deg);
    }
    100% {
    	transform: rotate(360deg);
    }
}
.circle {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: green;
}

CSSの説明は後述しますが、これで円周上を移動するアニメーションが実装できました。
円周上を移動するアニメーションのデモページ

アニメーションの仕組みは.circle-frameに対して背景色をつけると分かりやすいです。
表示確認用のデモページ

.circle-frameは円の半径と同じ高さ(+ .circleの高さの半分)になるようにして、下部中央が円の中心にくるようにしています。
この状態でtransform-originを center bottom (円の中心)にしてrotate()を変更することで、円周上を移動するようになります。