2020-08-03 2020-08-03
SVGをCSSでアニメーションさせる
Webサイトのトップビジュアルなどで、ロゴやテキストが徐々に描画されるアニメーションを時々見かけますね。 そこで今回はSVG形式の画像ファイルをCSSでアニメーションするサンプルをご紹介します。
SVGファイルを用意する
SVGというのはScalable Vector Graphicsの略称で、2001年頃にW3Cより勧告された技術です。拡大縮小してもギザギザにならないベクター形式の画像で、
近年はサポートするブラウザも増えたことから多くのサイトで使われるようになりました。
CSSで色の指定やアニメーションも可能なので、とても便利ですね…！
さて今回用意したSVGファイルは、iPadで適当に描いた文字を画像として保存し、Illustratorで画像トレースしました。（管理人の沖縄に行きたい気持ちがあふれ出ています）
[アセットの書き出し]で簡単にSVG形式の画像ファイルを書き出すことができます。
SVGファイルをテキストエディタで開くと、下記のようなソースを確認できます。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 189">
<g id="text" data-name="text">
<path class="cls-1" d="M57.79,25.1c-.06-1.21-.12-2.29-.17-3.37-.19-5.07-.45-10.13-.54-15.19A7.74,7.74,0,0,1,57.89,3,4,4,0,0,1,63,1.1a4.24,4.24,0,0,1,2.55,4.66A29.26,29.26,0,0,0,65.27,10c.11,3.56.31,7.11.49,10.67,0,.54.14,1.07.24,1.78a9.12,9.12,0,0,0,1.4-.19c6.23-2.06,12.47-4.11,18.67-6.24,2.4-.82,4.62-.14,5.59,2a4.12,4.12,0,0,1-2.12,5.52,15.06,15.06,0,0,1-2.27.94L68.92,30.39c-.77.24-1.54.5-2.62.86a8.56,8.56,0,0,0,1,1.53c2.39,2.12,2.61,4.18.5,6.51a2.47,2.47,0,0,0-.56,2.06c.31,4.16.61,8.33,1,12.49C69,63,69.75,72.12,70.56,81.26c.3,3.47.74,6.94,1.12,10.41a12.56,12.56,0,0,1,.16,1.83A4,4,0,0,1,64,94.82a22.53,22.53,0,0,1-.79-4.23c-.61-6.34-1.16-12.68-1.7-19-.59-6.75-1.14-13.51-1.71-20.26,0-.11-.11-.21-.3-.57-.42.75-.79,1.36-1.11,2-2.39,4.85-4.8,9.69-7.15,14.56A217.09,217.09,0,0,1,39.82,87a4.07,4.07,0,0,1-5.69,1.51,4.12,4.12,0,0,1-1.31-5.75c.69-1.26,1.46-2.49,2.24-3.69A206.19,206.19,0,0,0,46.73,57.87c3.08-6.25,6.43-12.38,9.68-18.55a11.46,11.46,0,0,1,1.34-2.07,3.42,3.42,0,0,0,.61-3.55A10.08,10.08,0,0,0,57,34a374,374,0,0,0-41.5,16c-2,1-4,2-6,3.14a18.86,18.86,0,0,0-2.65,1.9,4.09,4.09,0,0,1-5.28.26A4.15,4.15,0,0,1,.43,50.15a6.27,6.27,0,0,1,3-3c3.73-2,7.42-4.14,11.28-5.87A393.55,393.55,0,0,1,55.57,25.79Z"></path>
<path class="cls-1" d="M236.68,15.78c-.68,1.36-1.22,2.37-1.67,3.42a2.17,2.17,0,0,0-.18,1.32q2.1,7.92,4.29,15.83a4,4,0,0,0,2.51,3,3.63,3.63,0,0,1,2.07,4.09,4.32,4.32,0,0,1-3.2,3.65A4.77,4.77,0,0,1,235,45.4a22.62,22.62,0,0,1-3.26-5.64c-1.43-4-2.61-8.07-3.65-12.17-1.21-4.77-2.17-9.61-3.24-14.41a4,4,0,0,1,1.36-4.26,3.91,3.91,0,0,1,4.61-.39,1.81,1.81,0,0,0,1.89.08c4.9-2.37,10.18-3.56,15.48-4.64A194.61,194.61,0,0,1,271.69.42c5.18-.41,10.39-.79,15.55.24A15.25,15.25,0,0,1,294,3.58c3.79,3,5.12,7.13,5.51,11.71a38.77,38.77,0,0,1-1,11,95.93,95.93,0,0,1-5.06,16C289.6,52,285.78,61.69,281,70.92c-2.86,5.45-6.07,10.71-9.13,16.06q-3.7,6.51-7.44,13c-.2.35-.37.73-.6,1.07a4.05,4.05,0,0,1-5.4,1.45,4.13,4.13,0,0,1-1.87-5.12,12.06,12.06,0,0,1,.82-1.65c2.16-3.81,4.16-7.72,6.52-11.41a226,226,0,0,0,19.69-39.42c2.52-6.43,5.2-12.81,6.7-19.59a31.72,31.72,0,0,0,1-9.15,17.07,17.07,0,0,0-.47-3A5.53,5.53,0,0,0,286.69,9a29.12,29.12,0,0,0-9-.68,151,151,0,0,0-25.43,3.27c-4.61.95-9.15,2.27-13.71,3.46A13.87,13.87,0,0,0,236.68,15.78Z"></path>
<path class="cls-1" d="M125.42,55.35c-.33,0-.48-.1-.59-.05-5.92,2.15-11.84,4.3-17.11,7.85A14,14,0,0,0,106,64.59c-1.91,1.81-4.35,1.92-6,.24a4.39,4.39,0,0,1,.28-6.26,25.55,25.55,0,0,1,3.09-2.37,62.58,62.58,0,0,1,12.45-6.26c2.66-1.08,5.34-2.09,8.22-3.21-.44-3.29-.87-6.59-1.34-10.1-.74.16-1.39.25-2,.45q-10,3.22-20.11,6.48a4.16,4.16,0,0,1-5.22-2,4,4,0,0,1,1.51-5.21,11.14,11.14,0,0,1,2.61-1.17q10.36-3.28,20.75-6.52l1.72-.52c0-.75,0-1.48,0-2.21.14-3.35.2-6.7.48-10a6.67,6.67,0,0,1,2.16-4.54A5,5,0,0,1,128.9,10a4,4,0,0,1,3.23,2.53,3.62,3.62,0,0,1-.75,4.19A4,4,0,0,0,130.13,20c0,2,0,3.95,0,6.05,2.61-.49,5-1,7.43-1.38,1.22-.22,2.44-.4,3.66-.52a4.08,4.08,0,0,1,4.59,3.45,4,4,0,0,1-3.52,4.69q-4.65.8-9.3,1.62c-.67.12-1.32.32-2.26.55.38,3.12.76,6.19,1.15,9.36a6.58,6.58,0,0,0,1.2-.16c4.44-1.59,8.89-3.17,13.3-4.84a4.22,4.22,0,0,1,4.44.52,4,4,0,0,1-.29,6.51,15,15,0,0,1-3.31,1.62c-3.93,1.4-7.88,2.73-11.83,4.08-.64.22-1.27.46-2.08.76.38,2.14.72,4.22,1.12,6.28a169.37,169.37,0,0,0,5.91,23.68,4.1,4.1,0,1,1-7.69,2.78c-1.08-3.17-2.15-6.36-2.91-9.62-1.49-6.39-2.76-12.84-4.12-19.26C125.57,56,125.5,55.68,125.42,55.35Z"></path>
<path class="cls-1" d="M187.35,35.46a6.47,6.47,0,0,0-1.15.11c-5.27,1.47-10.55,2.89-15.78,4.48a25.48,25.48,0,0,0-4.59,2.21,4.1,4.1,0,0,1-5-.45,3.93,3.93,0,0,1-.83-4.87,6.43,6.43,0,0,1,2.41-2.39,47.47,47.47,0,0,1,7.4-3c5.57-1.65,11.22-3.05,16.84-4.55l1-.26c.13-1.31.24-2.66.39-4,.28-2.45.46-4.92.9-7.34a5.65,5.65,0,0,1,6.06-5c3.09.22,5,3.81,3.07,6.18-1.42,1.71-1.55,3.54-1.74,5.47-.07.74,0,1.49,0,2.41a6.44,6.44,0,0,0,1.35-.1c4.08-1.16,8.15-2.31,12.2-3.54a4.21,4.21,0,0,1,5,1.75,3.9,3.9,0,0,1-1,5.3,10.59,10.59,0,0,1-3.31,1.56c-4.08,1.15-8.2,2.18-12.3,3.25l-2.5.62c-.07,1.3-.16,2.52-.18,3.74-.17,8.84-.19,17.68-.53,26.5-.24,6.43-.89,12.84-1.39,19.26a5.77,5.77,0,0,1-.49,2,4,4,0,0,1-4.68,2.1,4,4,0,0,1-3-4.16c.14-3.28.46-6.55.65-9.84.37-6.42.82-12.84,1-19.27.19-5.55.12-11.1.17-16.65Z"></path>
<path class="cls-1" d="M266.92,137.14c-.21,2.83-.55,5.56-.58,8.28q-.15,15.6-.12,31.2a11,11,0,0,0,1.87,6.79,3.82,3.82,0,0,1-.93,5.16,4.13,4.13,0,0,1-5.13,0,7.8,7.8,0,0,1-2.76-4.23,37.32,37.32,0,0,1-1.22-6.84c-.58-11.63-.24-23.26.25-34.89,0-.95.08-1.89.14-3.17-3.14,1.1-6.05,2.07-8.92,3.14a3.86,3.86,0,0,0-1.29,1.23,4.1,4.1,0,0,1-5.47,1.17,4.4,4.4,0,0,1-1.72-5.4,7.42,7.42,0,0,1,4-4,57.25,57.25,0,0,1,5.53-2.19c2.26-.77,4.55-1.49,6.85-2.11,1.41-.38,2.21-1,2.34-2.57A22,22,0,0,1,260.8,124a8.12,8.12,0,0,1,5.22-5.4,4.06,4.06,0,0,1,5.1,1.84,4,4,0,0,1-1.25,5.28c-.76.55-1.74.89-1.42,2.31,1.11-.28,2.22-.55,3.3-.86,3-.84,5.9-1.77,8.88-2.52a6.09,6.09,0,0,1,3,0,3.84,3.84,0,0,1,2.67,3.75,3.93,3.93,0,0,1-2.42,3.74,18.32,18.32,0,0,1-2.54.81l-13,3.73C267.94,136.77,267.56,136.92,266.92,137.14Z"></path>
<path class="cls-1" d="M218.14,153.7c.06,1.26.13,2.35.15,3.43q.12,5.24.17,10.47a6.67,6.67,0,0,1-.26,1.82,4,4,0,0,1-4.52,3,4,4,0,0,1-3.45-4c0-2.67.05-5.34,0-8,0-1.56-.19-3.12-.3-4.85a12.82,12.82,0,0,0-1.69.32c-2.21.73-4.42,1.44-6.59,2.28a4.37,4.37,0,0,0-2.85,2.66c-.69,1.9-2.7,2.61-4.81,2.13a4.56,4.56,0,0,1-3.52-4,5.48,5.48,0,0,1,2.43-4.95,38.2,38.2,0,0,1,6.38-3.67c2.62-1.12,5.43-1.82,8.16-2.7.57-.18,1.16-.33,1.89-.54-.22-2.5-.43-4.92-.65-7.52a77.81,77.81,0,0,0-11.7,2.83,4.67,4.67,0,0,0-1.31.94,4.1,4.1,0,0,1-5.87-.47,4.31,4.31,0,0,1,.58-6.21,18.27,18.27,0,0,1,5-2.37c3.34-1,6.76-1.69,10.15-2.51.73-.17,1.47-.31,2.37-.5-.08-1.46-.15-2.88-.22-4.29a5.07,5.07,0,0,1,1.28-4,3.87,3.87,0,0,1,4.08-1.23,6.56,6.56,0,0,1,4.17,7.3c-.07.26-.18.51-.3.85,1,.21,1.89.37,2.79.62a5.87,5.87,0,0,1,3.44,2.45,4.08,4.08,0,0,1-4.64,6.22c-.45-.14-.88-.33-1.57-.59.19,2.29.37,4.42.57,6.85l5.7-1.27a4.12,4.12,0,0,1,5,2.57,4,4,0,0,1-2,5,14,14,0,0,1-2.73.87c-.86.21-1.74.32-2.62.49S219.17,153.48,218.14,153.7Z"></path>
<path class="cls-1" d="M391.33,148.36c-.32-.38-.61-.67-.85-1a4,4,0,0,1,.06-5.27A23.6,23.6,0,0,1,400.2,135a11.69,11.69,0,0,1,13.92,4c4.85,6.58,5.51,13.67,2.05,21.08A25.41,25.41,0,0,1,407,170.65c-2.78,1.84-5.77,3.09-9.26,2.38a9.37,9.37,0,0,1-6.84-5.35,18.54,18.54,0,0,1-1.71-8C389.12,155.81,389.42,151.94,391.33,148.36Zm7.53-3.29c2.48,3.27,2.39,4.55-.07,7.26a4.32,4.32,0,0,0-1,2,20.61,20.61,0,0,0-.15,7.75c.62,3.19,1.74,3.72,4.47,1.95a17.65,17.65,0,0,0,7.09-8.54,11.27,11.27,0,0,0-1.5-11.27,3.55,3.55,0,0,0-4.84-1.36C401.55,143.43,400.3,144.27,398.86,145.07Z"></path>
<path class="cls-1" d="M141.64,182.81A9.92,9.92,0,0,1,134.3,179a24.57,24.57,0,0,1-2.62-3.92,70.56,70.56,0,0,1-6.28-16.44,7.64,7.64,0,0,1-.26-4.24,4.41,4.41,0,0,1,5.21-3.23c2.29.48,3.53,2.41,3.25,4.93a5,5,0,0,0,.1,1.8A58.33,58.33,0,0,0,139,171.44c2,3.54,2.28,3.77,5.77,1.38a91.8,91.8,0,0,0,7.26-6c.42-.35.77-.78,1.19-1.14a4.17,4.17,0,0,1,5.91.06,4.06,4.06,0,0,1-.28,5.88c-2.93,2.67-5.93,5.27-9,7.73a19.84,19.84,0,0,1-4.47,2.47A25.71,25.71,0,0,1,141.64,182.81Z"></path>
<path class="cls-1" d="M340.08,156.91a32.74,32.74,0,0,0,2.82-2c1.48-1.32,2.86-2.75,4.31-4.1a4.09,4.09,0,1,1,5.83,5.74c-2.48,2.54-4.89,5.17-8,6.94-4.08,2.3-7.64,1.93-11.11-1.18a8.83,8.83,0,0,1-.88-.85,37.18,37.18,0,0,1-7.83-15.61c-.73-3.15.39-5.27,3.1-6.62a4.17,4.17,0,0,1,4.78.52,3.89,3.89,0,0,1,1,4.67,2.6,2.6,0,0,0,0,2.51c1.42,2.64,2.78,5.31,4.25,7.93A14,14,0,0,0,340.08,156.91Z"></path>
<path class="cls-1" d="M293.92,177.48a19.13,19.13,0,0,1-9.84-2.62c-3.14-1.88-4.24-4.91-4.71-8.23a3.82,3.82,0,0,1,3.13-4.2,4.06,4.06,0,0,1,4.6,2.25,5.13,5.13,0,0,1,.46,1.35,3.33,3.33,0,0,0,2.72,2.72,10.48,10.48,0,0,0,8-.71,31.86,31.86,0,0,0,8.17-6.14c.53-.53,1-1.11,1.59-1.6a4.08,4.08,0,0,1,5.81,5.73c-.48.58-1,1.1-1.56,1.64a39.77,39.77,0,0,1-9.95,7.52A19.57,19.57,0,0,1,293.92,177.48Z"></path>
<path class="cls-1" d="M300.29,146.37a4.22,4.22,0,0,1-2.53,3.44c-4.22,2.12-8.42,4.27-12.63,6.41-.85.44-1.69.91-2.54,1.35a16.56,16.56,0,0,0-6,4.86,3.8,3.8,0,0,1-4.16,1.56,4,4,0,0,1-3.14-3.17,4.21,4.21,0,0,1,.88-3.47,19.89,19.89,0,0,1,6.16-5.64c1-.62,2-1.19,3-1.73,4.62-2.39,9.23-4.79,13.89-7.11a8,8,0,0,1,3.11-.87A4,4,0,0,1,300.29,146.37Z"></path>
<path class="cls-1" d="M215.36,187.84c-5.6,0-11.09-.57-16.32-2.69a22.05,22.05,0,0,1-3.31-1.62,4.45,4.45,0,0,1-2.17-4.55c.21-1.76,2.25-3.67,4.18-4.08a3.9,3.9,0,0,1,4.52,2,2.45,2.45,0,0,0,1.73,1.27,45.08,45.08,0,0,0,6.64,1.17c3.62.15,7.25-.06,10.87-.11a9.17,9.17,0,0,1,2.23.12,4,4,0,0,1,3,4.11,3.91,3.91,0,0,1-3.42,3.79C220.68,187.55,218,187.65,215.36,187.84Z"></path>
<path class="cls-1" d="M367.45,154.72a4.11,4.11,0,0,1-3.39,4.53,4,4,0,0,1-4.63-3.34,96.22,96.22,0,0,1-1.06-9.57c-.22-3.61-.18-7.24-.26-10.86a4.1,4.1,0,0,0-.76-2.69c-1.84-2.3.61-7.35,3.9-7.4a4.16,4.16,0,0,1,4.53,3.27,14.24,14.24,0,0,1,.36,2.84c.13,3.75.15,7.52.34,11.27.18,3.48.53,6.94.81,10.41C367.34,153.73,367.4,154.27,367.45,154.72Z"></path>
<path class="cls-1" d="M172.79,158.28q.17,4.82.32,9.61a4,4,0,0,1-3.42,4.2,4,4,0,0,1-4.58-2.87,12,12,0,0,1-.41-3c0-4.78,0-9.56,0-14.34a12.51,12.51,0,0,1,.22-2.44,4.07,4.07,0,0,1,8.09.89c0,2.66,0,5.32,0,8Z"></path>
</g>
</svg>
CSSでアニメーションをつける
それでは肝心のアニメーションをさせます。
<style>
div {
width:1000px;
height: 600px;
background: url('img/okinawa_bg.jpg');
background-size: cover;
display: flex;
justify-content: center;
}
svg {
width: 70%;
fill:none ;
stroke: #fff;
stroke-width: 2px;
stroke-dasharray: 1500;
stroke-dashoffset: 1500;
animation: line ease-in 2s forwards;
}
@keyframes line {
0% {
stroke-dashoffset: 1500;
fill: rgba(255, 255, 255, 0);
}
75% {
fill: rgba(255, 255, 255, 0.2);
}
100% {
stroke-dashoffset: 0;
fill: rgba(255, 255, 255, 0.6);
}
}
</style>
アニメーションに関わるプロパティを簡単に説明すると、
stroke
線の色を指定します。
stroke-dasharray
線の間隔を指定します。
stroke-dashoffset
線の開始位置を指定します。
animation
アニメーションに関するプロパティ（@keyframe名やスピードやタイミング）を指定します。
stroke-dasharray（間隔）にはパスの長さを設定します。とはいえパスの長さよりも多くなっても大丈夫のようです。これでパスの線を隠します。 そしてstroke-dashoffset（開始位置）にも同じ値＝パスが隠れる位置を設定します。
@keyframeで徐々にstroke-dashoffsetの値が0になるようにします。これでアニメーションの完成です！
今回は塗りの部分もほんのり白くなるように設定しました。
