SVGを使ったアニメーション2種類
本記事ではSVG形式のデータを使って、ちょっとしたアニメーションを実装したいと思います。
徐々に文字が現れるアニメーション
実装目標の確認
1つ1つの文字が徐々に生成されていく感じです。
アニメーションが終わってしまった時は、ページを更新して見てみてください。
HTML & CSS コード例
<svg class="svg1" xmlns="http://www.w3.org/2000/svg">
<path class="path1" d="（省略）"/>
</svg>.path1 {
stroke: #333; /* 線の色 */
fill: none; /* 塗りつぶし */
}
.svg1 {
stroke-dasharray: 120px;
animation: draw 2.5s linear forwards;
}
@keyframes draw {
0% {
stroke-dashoffset: 120px;
}
100% {
stroke-dashoffset: 0px;
}
}破線の間隔をstroke-dasharrayで設定しています。使う文字の形によってここの数字を変えます。
そしてpathが始まる場所をstroke-dashoffsetで設定しています。stroke-dasharrayと同じ値にしています。
線描写からの写真出現アニメーション
実装目標の確認
最初に線で描写があり、その後画像がふわっと出てくるアニメーションです。
線描写はずいぶん手抜き感が出ていますが…
アニメーションが終わってしまっている時は、ページを更新して見てみてください。
HTML & CSS コード例
<div class="container2">
<svg class="svg2" xmlns="http://www.w3.org/2000/svg">（省略）</svg>
<img class="image2" src="（画像のURL）">
</div>クラス名に数字の2を付けているのは、記事内の他の例と干渉しないようにとりあえずつけてるだけなので、実装の際は適当に変えてください。
また、<svg></svg>の中は省略していますが、画像とピッタリ重なるようにあらかじめ画像と同じサイズの枠に収めてグループ化しておくといいと思います。
.container2 {
position: relative;
}
.svg2 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
stroke-dasharray: 10800px;
animation: line 2.5s linear forwards;
}
@keyframes line {
0% {
stroke-dashoffset: 10800px;
}
100% {
stroke-dashoffset: 0px;
}
}
.image2 {
width: 100%;
display: block;
opacity: 0;
animation: 2s fadein 3s forwards;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}線の描写は2.5秒かけて行い、その0.5秒後（開始から3秒後）に画像をフェードインさせています。
まとめ
いかがでしたか？
SVGを使えば簡単にこんなアニメーションが作れてしまいます。
ぜひ、試してみて下さい。
最後までご覧いただきありがとうございました。
