Help us understand the problem. What is going on with this article?

CSSによるSVGアニメーション

今回はSVG独自のプロパティのみを扱うので、CSSアニメーション自体は下記の記事を参照してください。
CSSによるアニメーション(CSS Transition、CSS Animation)

CSS以外の方法でのSVGアニメーションはこちらをご参照ください。
SVGのアニメーション方法の比較

読み込み方

SVGの読み込み方によってCSSが効くかどうかが決まります。

読み込み方 反映
objectタグで読み込んだ場合 CSSでスタイルを書いても反映されない
インラインSVG CSSで書いたスタイルは反映される

準備

SVGをHTML内に配置し、classを指定します。
全てのパーツを別々に動かしたい場合は別のクラス名をつけます。
一緒に動かすパーツは同一のクラス名でよいです。

プロパティ 内容
stroke 線の色を指定する
stroke-width 線の太さを指定(pxは不要、小数点も使用可能)
stroke-dasharray 線の間隔を指定
stroke-dashoffset 線の位置を指定する(書き順アニメーション)線の開始位置をずらす
stroke-opacity 線の透明度
svg
<svg width="200" height="100" viewBox="0, 0, 200, 100" xmlns="http://www.w3.org/2000/svg">

  <path d="M10,10 l0,0 180,0" stroke="#333333" fill="none" stroke-width="10" class="anime1"></path>

  <path d="M10,30 l0,0 180,0" stroke="#333333" fill="none" stroke-width="10" class="anime2"></path>

  <path d="M10,50 l0,0 180,0" stroke="#333333" fill="none" stroke-width="10" class="anime3"></path>

  <path d="M10,70 l0,0 180,0" stroke="#333333" fill="none" stroke-width="10" class="anime4" stroke-dasharray="2 4"></path>

  <path d="M10,90 l0,0 180,0" stroke="#333333" fill="none" stroke-width="10" class="anime5"></path>
</svg>
css
.anime1{
  animation: strokeAnimation1 ease-in-out 3s;
}

@keyframes strokeAnimation1{
  from{
    stroke:#333333;
  }
    to{
      stroke:#e74c3c;
    }
}

.anime2{
  animation: strokeAnimation2 ease-in-out 3s;
}

@keyframes strokeAnimation2{
  from{
    stroke-width:10; 
  }
    to{
      stroke-width:1;
    }
}

.anime3{
  animation: strokeAnimation3 ease-in-out 3s;
}

@keyframes strokeAnimation3{
  from{
    stroke-dasharray:2 4;
  }
  to{
    stroke-dasharray:2 2;
  }
}

.anime4{
  animation: strokeAnimation4 ease-in-out 3s;
}

@keyframes strokeAnimation4{
  from{
    stroke-dashoffset:1;
  }
  to{
    stroke-dashoffset:100;
  }
}

.anime5{
  animation: strokeAnimation5 ease-in-out 3s;
}

@keyframes strokeAnimation5{
  from{
    stroke-opacity:1; 
  }
  to{
    stroke-opacity:0;
  }
}

※hoverをきっかけにするときはanimationではなくtransitionを使うこともできます。

塗り

プロパティ 内容
fill 塗りつぶし(transparentも可)
fill-opacity 透明度(0〜1)

fill:none;

塗りつぶし色を透明にできますが、イベントも無効になります。
SVGをツールで書きだした時には、意図しないnoneが付いていないか確認が必要です。

none回避方法

pointer-eventsを設定します。
noneではなくrgbaのalpha0で色を透明にします。

svg
<svg width="130" height="230" viewBox="0, 0, 130, 230" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100" fill="#333333" class="anime1"/>

  <rect x="10" y="120" width="100" height="100" fill="#333333" class="anime2"/>

</svg>
css
.anime1{
  animation: fillAnimation1 ease-in-out 3s;
}

@keyframes fillAnimation1{
  from{
    fill:#333333;
  }
    to{
      fill:#e74c3c;
    }
}

.anime2{
   animation: fillAnimation2 ease-in-out 3s;
}

@keyframes fillAnimation2{
  from{
    fill-opacity:1; 
  }
  to{
    fill-opacity:0; 
  }
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした