SVGアニメーション

2015年11月12日

ブログをリニューアルするにあたって画像やアイコンをSVG化しました。今回はSVGのアニメーションに挑戦します。

CSSのtransitionを使ってhover時にアニメーションをつける

メニューのマウスオーバー時のアクションでボックスのラインがアニメーションで変化するデモです。
割と最近流行りの装飾スタイルです。

CSS

.svg-box {
width:100px;
height:100px;
margin:20px auto;
}
.hover{
stroke:#000;
fill:none;
stroke-width:1;
stroke-dashoffset:400;
stroke-dasharray: 400;
transition: stroke-dashoffset 0.3s linear;
}
svg:hover .hover {
stroke-dashoffset:0;
}

HTML

<div class="svg-box">
<svg viewBox="0 0 100 100" width="100%" height="100%">
<rect class="hover" x="0" y="0" width="100" height="100" />
</svg>
</div>

デモ

CSSのanimationと@keyframesを使ってアニメーションをつける

ロゴや筆記スタイルのビジュアルが描かれていくアニメーションでよく利用されます。こちらも最近よく使われてきています。

CSS

.svg-box {
width:500px;
height:500px;
margin:20px auto;
}
.dash{
stroke:#000;
fill:none;
stroke-width:1;
stroke-dasharray: 400;
stroke-dashoffset:400;
animation: DASH 3s ease-in-out alternate forwards;
-webkit-animation:DASH 3s ease-in-out 0s forwards;
animation:DASH 3s ease-in-out 0s forwards;
}
@keyframes DASH{
0%{stroke-dashoffset:400;}
100%{stroke-dashoffset:0;}
}
@-moz-keyframes DASH{
0%{stroke-dashoffset:400;}
100%{stroke-dashoffset:0;}
}
@-webkit-keyframes DASH{
0%{stroke-dashoffset:400;}
100%{stroke-dashoffset:0;}
}

HTML

<div class="svg-box">
<svg viewBox="0 0 100 100" width="100%" height="100%">
<path class="dash" d="M4.833,67.545c1.755,0.222,4.401-2.669,5.438-3.941
c2.507-3.074,3.062-7.818,2.85-11.674c-0.155-2.828-1.471-7.044-4.067-3.079c-1.471,2.247-2,4.901-0.979,7.394
c1.474,3.604,4.252,5.469,7.949,6.618c4.207,1.308,6.446,1.035,9.19-2.357c4.866-6.018,4.758-14.411,3.818-21.652
c-0.37-2.846-0.527-7.079-3.139-8.954c-1.424,1.008-2.326,4.601-2.653,6.263c-0.651,3.311-1.176,7.48-0.787,10.855
c0.615,5.33,4.088,9.18,8.699,11.528c3.38,1.723,7.035,2.843,10.633,3.987c1.673,0.531,3.719,1.309,5.513,1.245
c5.59-0.198,6.996-12.215,6.674-16.37c-0.146-1.892-0.679-3.348-2.681-3.821c-2.858-0.675-4.372,0.486-5.553,2.924
c-2.261,4.667-2.95,14.542,0.9,18.444c2.428,2.46,6.092,2.394,9.336,2.242c4.204-0.198,6.455-2.603,7.898-6.273
c1.434-3.646,2.104-6.91,2.476-10.855c0.154-1.642,1.16-5.814-0.711-6.657c-1.489-0.671-3.513,1.249-4.318,2.236
c-1.458,1.786-2.004,4.182-1.769,6.467c0.825,8.044,19.23,16.825,22.691,7.549c2.396-6.422,2.497-14.312,2.026-21.067
c-0.306-4.36-0.324-10.53-2.656-14.396c-4.152,6.254-2.392,15.936,0.363,22.375c1.57,3.669,3.157,6.532,6.163,9.29
c2.271,2.082,4.691,3.971,6.695,6.281"/>
</svg>
</div>

デモ

ただしSVGのanimationはIEはEdgeを含め未対応です。transitionはEdgeは対応してますが11以前は一部のみサポート。