CSSで円弧アニメーションを作成

  • WebDesign

    • スライドショーのインジケーターに円弧アニメーションがあるものを見かけます。今回は、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を組み合わせて、クラスの付け替えで、アニメーション付きのスライダーを作成することもできます。

    You may also like