CSSで円弧アニメーションを作成
スライドショーのインジケーターに円弧アニメーションがあるものを見かけます。今回は、CSSで円弧アニメーションを作成する方法を紹介します。
コード
ページが読み込まれたら2秒で円が完成します。
<svg class="svg" width="88" height="88" viewBox="0 0 88 88">
<circle class="circle" cx="44" cy="44" r="42" />
</svg>.svg {
transform:rotate(-90deg); // デフォルトだとSVGの線の開始位置が90°の地点からになるので、0°の地点にまで戻してやる。
}
.circle {
stroke: red;
stroke-width: 4px;
animation: circleAnim 2s forwards;
fill: transparent;
stroke-dasharray: 264px;
stroke-dashoffset: 264px;
}
@keyframes circleAnim {
to {
stroke-dashoffset: 0;
}
}以上で今回の説明は終了です。JavaScriptを組み合わせて、クラスの付け替えで、アニメーション付きのスライダーを作成することもできます。
