読者です 読者をやめる 読者になる 読者になる

オモリのブログ

趣味をつらつらと書いてみる

CSSへのSVGアニメーションの取り入れ方

最近svgアニメーションを少し学んだ、オモリです。

 

  • この記事を読むのにかかる時間:2分
  • svgアニメーションの取り入れ方の一連

 

1. illustratorで、文字をペンツールを使って一筆書きのパスとしてトレースする

ポイントは一筆書き。(分けるときは別のパスとしてトレースし、アニメーション設定で合体させる。)

 

2.  トレースしたものをsvg形式で保存し、htmlに配置する

ポイントはsvgタグの中を配置することと、パスそれぞれにclass名などを設定しておく。

 

3. cssをいじる。

例).svg {

                 stroke: #d3d3d3;

                 fill: none;

                 stroke-width: 4;

                 stroke-dasharray: 5000;

                 stroke-dashoffset: 5000;

                 animation-name: dash;

                 animation-duration: 4s;

                 animation-iteration-count: 1;

                 animation-direction: normal:

                 animation-delay: 0s;

                 animation-fill-mode: forwards;

                 animation-timing-function: ease-in;

}

@keyframes dash{

                 0%{stroke-dashoffset: 5000;}

                 100%{stroke-dashoffset: 0;}

}

@-webkit-keyframes dash{

                 0%{stroke-dashoffset: 5000;}

                 100%{stroke-dashoffset: 0;}

}

 

 

 

↓参考にしたサイト

 

www.webcreatorbox.com

sterfield.co.jp