CSSのみで実現する円形アニメーション：border-radiusと透明な背景を使った円の描き方

CSSのみを使用して、透明な背景を持つ円を描画したい場合は、border-radiusプロパティとボーダー色の組み合わせを活用します。本記事では、回転する円弧のアニメーションを例に、具体的な実装手順をわかりやすく解説します。

円を描画するためのCSSコード

以下のコードでは、ページ全体に斜めのストライプ背景を敷き、その上で半円状の弧が回転するアニメーションを実現しています。最大のポイントは、太いボーダーのうち上部と左側のみに色を付け、残りの部分を透明にすることで「円弧」を表現している点です。

body {
    background: repeating-linear-gradient(45deg, white 0px, green 100px);
    height: 400px;
    background-size: 400px 400px;
    background-repeat: no-repeat;
}
html {
    height: 100%;
}
#box {
    position: absolute;
    width: 400px;
    height: 400px;
    border: solid blue 2px;
    animation: colors 5s infinite;
}
#demo {
    width: 50%;
    height: 100%;
    right: 0px;
    position: absolute;
    overflow: hidden;
    transform-origin: left center;
    animation: cliprotate 18s steps(2) infinite;
    -webkit-animation: cliprotate 18s steps(2) infinite;
}
.circlehalf {
    box-sizing: border-box;
    height: 100%;
    right: 0px;
    position: absolute;
    border: solid 20px transparent;
    border-top-color: blue;
    border-left-color: blue;
    border-radius: 50%;
}
#clipped {
    width: 200%;
    animation: rotate 8s linear infinite;
    -webkit-animation: rotate 8s linear infinite;
}
#fixed {
    width: 100%;
    transform: rotate(145deg);
    animation: showfixed 18s steps(2) infinite;
    -webkit-animation: showfixed 18s linear infinite;
}
@-webkit-keyframes cliprotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes cliprotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
    0% {transform: rotate(-45deg);}
    100% {transform: rotate(135deg);}
}
@keyframes rotate {
    0% {transform: rotate(-45deg);}
    100% {transform: rotate(135deg);}
}
@-webkit-keyframes showfixed {
    0% {opacity: 0;}
    49.9% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 1;}
}

※上記コードの#boxで指定しているcolorsアニメーションを使用する場合は、用途に合わせて別途@keyframes colorsを定義してください。

対応するHTML構造

CSSを適用するHTMLマークアップは非常にシンプルです。外枠となる#boxの中に、クリップされる側の弧（#clipped）と、固定される側の弧（#fixed）を配置しています。

<div id="box">
    <div id="demo">
        <div class="circlehalf" id="clipped">
        </div>
    </div>
    <div class="circlehalf" id="fixed">
    </div>
</div>

コードのポイント解説

1. 円弧の作り方

.circlehalfクラスでは、20pxの太いボーダーを設定しつつ、border-top-colorとborder-left-colorだけを青色に指定しています。それ以外のボーダーは透明なため、実際に描画されるのは半円状の弧のみです。さらにbox-sizing: border-boxとborder-radius: 50%を組み合わせることで、ボーダーを含めた状態で正確な円形を保っています。

2. アニメーションの仕組み

• cliprotate：外側のコンテナ（#demo）を0度から360度まで回転させます。steps(2)により補間なしの段階的な動きになります。
• rotate：内部の弧（#clipped）を-45度から135度の範囲で線形的に回転させ、見える弧の長さを変化させています。
• showfixed：固定側の弧（#fixed）の不透明度を周期の半分（50%）で切り替え、回転アニメーションとタイミングを同期させています。

3. ブラウザ互換性への配慮

各アニメーションには-webkit-プレフィックス付きの定義も併記されています。これにより、WebKit系ブラウザでも同様の動作が期待できます。最近のモダンブラウザであれば標準の@keyframesとanimationプロパティだけで十分ですが、古い環境をサポートする必要がある場合はプレフィックスを残しておくと安心です。

このように、画像やJavaScriptに頼らなくても、border-radiusと透明なボーダー色を工夫するだけで、動的な円形アニメーションをCSSのみで実装できます。ローディングインジケーターやプログレスリングなど、さまざまな場面に応用できるテクニックなので、ぜひ実際のプロジェクトでも試してみてください。