SVGタグの使い方がいまいち分からないと思っていませんか？
なんとなくは使えているけれど、本質的な部分は理解していないままなんてこともありますよね…
そこで今回は、以下の内容を分かりやすく説明します。
- SVGタグを使ったアニメーション
- 様々なパターンを用いてアニメーションを実装
この記事を書いた人
yuki
2023年からWeb制作会社でコーダーとして活動。
HTML, CSS, JavaScript, Shopify対応可能。
もくじ
はじめに
今回紹介するコードはこちらです！
<svg class="svg-circle" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="19">
</svg>.svg-circle {
width: 250px;
}
circle {
fill: #fff;
stroke: #060547;
stroke-width: 1;
}
/* animation
------------------------------------------------------*/
.svg-circle circle {
animation: circle 3s forwards;
}
@keyframes circle {
0% { stroke-dasharray: 0 126;}
99.9%, to { stroke-dasharray: 126 126;}
}svgタグアニメーションの実装方法
今回実装するアニメーションの流れです。
- HTMLのSVGタグで形を作成
- CSSのkeyframesでアニメーションを実装
1. HTMLのSVGタグで形を形成
<svg class="svg-circle" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="19">
</svg>.svg-circle {
width: 250px;
}
circle {
fill: #fff;
stroke: #060547;
stroke-width: 1;
}SVGのcircle要素で円を描きます。
fillは、塗り
strokeは、線
stroke-widthは、線の太さ
2. CSSのkeyframesでアニメーションを実装
/* animation
------------------------------------------------------*/
.svg-circle circle {
animation: circle 3s forwards;
}
@keyframes circle {
0% { stroke-dasharray: 0 126;}
99.9%, to { stroke-dasharray: 126 126;}
}@keyframesを使って、円の線をアニメーションさせます。
様々なパターン
<svg class="svg-circle" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="19">
</svg>開始位置：上(-90deg)
.svg-circle {
width: rem(250);
transform: rotate(-90deg);
}開始位置：下(90deg)
.svg-circle {
width: rem(250);
transform: rotate(90deg);
}開始位置：左(-180, 180deg)
.svg-circle {
width: rem(250);
transform: rotate(180deg);
}開始位置：右斜め
.svg-circle {
width: rem(250);
transform: rotate(-15deg);
}まとめ
SVGタグをアニメーションさせる場合はCSSの@keyframesを使うと便利です。
アニメーションの開始位置もCSSで簡単に変更できるので、色々試してみるとアニメーションの幅が広がります！
