【CSS】SVGアニメーションの基礎.2

タグ :

CSS

HTML

WEB DESIGN

1 SVGアニメーションサンプル
2 HTML 部分
3 CSS 部分

SVGアニメーションサンプル

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

SVGを用いたアニメーションとスタイリングの例です。
以下に、このコードの解説をします。

HTML 部分

<svg> タグ



<svg version="1.0" id="milmona" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 566.9 566.9"  width="90%" height="90%"  style="enable-background:new 0 0 566.9 566.9">

xmlns=”http://www.w3.org/2000/svg”: SVGの名前空間を指定。これがないとSVGが正しくレンダリングされません。
viewBox=”0 0 566.9 566.9″: ビューの領域を定義します。この設定でSVGのコンテンツがどのように表示されるかが決まります。
width=”90%” height=”90%”: SVGのサイズを設定しています。ここでは親要素に対して90%のサイズに設定されています。

<circle> タグ



<circle class="milmona-circle1" cx="283.5" cy="284.2" r="138.1" />
<circle class="milmona-circle2" cx="283.5" cy="284.2" r="138.1" />
<circle class="milmona-circle3" cx="283.5" cy="284.2" r="138.1" />

cx, cy: 円の中心の座標。
r: 円の半径。

<path> タグ



<path class="object" d="M333.4 270.4c-.8-2.4-1.2-5.1-2-7.8..."/>

d 属性: パスのデータを定義します。M は移動、c は相対的な曲線です。

<g> タグ



<g class="st1">
  <!-- 複数のパスが含まれています -->
</g>

グループ要素で、内部の全ての要素に対してスタイルやアニメーションを適用できます。

<switch> タグ



<switch>
  <g class="milmona-group">
    <!-- グループ要素が含まれています -->
  </g>
</switch>

<switch> タグは、異なる子要素を条件によって表示するために使いますが、ここでは単にグループをまとめています。

CSS 部分

SVG の基本スタイル



svg {
  position: absolute;
  inset: 0;
  margin: auto;
}

osition: absolute;: SVGを親要素に対して絶対配置します。
inset: 0;: 上下左右のマージンを0にします。
margin: auto;: 中央に配置されるようにします。

アニメーションの基本設定



.milmona-circle1, .milmona-circle2, .st1, .st2, .dashed-line, .fadein1, .fadein2 {
  transition: 200ms all ease;
  transform-origin: 50% 50%;
}

transition: 要素の変化をスムーズにする設定です。200msで全てのプロパティが変更されます。
transform-origin: 変形の基準点を中心に設定します。

.milmona-circle1 のアニメーション



.milmona-circle1 {
  animation: circle1 0.2s linear 1s normal forwards;
}

@keyframes circle1 {
  0% {
    fill: transparent;
    transform: scale(1);
  }
  100% {
    fill: #516bce;
    transform: scale(0.95);
  }
}

animation: アニメーションを適用。circle1 という名前のアニメーションが0.2秒間で実行され、1秒の遅延があります。
@keyframes circle1: アニメーションの設定で、fill の色と transform のスケールを変化させます。

.st1 の回転アニメーション



.st1 {
  stroke: #fff;
  animation: rotate2 20s linear 1s infinite normal;
}

@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

animation: 20秒で360度回転し続けるアニメーションです。

.fadein1 のフェードインアニメーション



.fadein1 {
  animation: fadein1 200ms linear 1s;
}

@keyframes fadein1 {
  0% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

animation: 200msでフェードインし、スケールが1.3から1に変わります。

.fadein2 のフェードインアニメーション



.fadein2 {
  transform: scale(0);
  stroke: #516bce;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 12.9653, 13.9626, 0, 12.9653, 13.9626, 0;
  animation: fadein2 200ms linear 1s forwards;
}

@keyframes fadein2 {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}