ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【SVG・css3】CSS3でのSVGアニメーション

ロゴのSVGアニメーション

AIでSVGファイルを作ってタグをhtmlに入れる

<div id="box">
<!--svgタグ-->
<svg ~~~~~>
~~~~
</svg>
<!--svgタグ-->
</div>

親要素で大きさ等指定できる

#box{
    width:300px;
    margin:80px auto;
    border:1px solid #000;
    }

最初の状態でパスが隠れるようにする。

stroke
線の色
stroke-width
線の太さ
fill
塗りつぶしの色
stroke-dasharray
破線の間隔
stroke-dashoffset
破線の開始位置

破線の間隔分、破線の開始位置をずらすので空白が表示される。

path{
    stroke:#000;
    stroke-width:1;
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    fill:#fff;
    animation:svg-bar 3s forwards linear;
}

アニメーションで操作

開始位置を0にアニメーションさせることで徐々に線が表示されていく動きになる

@keyframes svg-bar{
    0%{
        stroke-dashoffset:1000;
        
    }
    40%{
        stroke-dashoffset:0;
        fill:#fff;
        
    }
    100%{
        stroke-dashoffset:0;
        fill:#000;
    }
}