svgエディタを使わず文字をアニメーションさせるCSS

svgにするといいと聞くけど、調べても何やら難しい内容がつらつら書かれていて結局諦めてしまっていませんか？
イラレとかエディタ使って書き出して～～とかよくわからないと感じている方必見。
簡単にsvgを使ってアニメーションさせる方法。

このサイトのタイトルでも使っています。
HTML上では、svg　と text で好きなテキスト部分を囲むだけ。

アニメーションDEMO

動かないときは、リロードかけてみてください。

　
<text x="0" y="50%">office-kibunya</text>

　
text {
    stroke: black;
    fill: none;
    font-size: 45px;
    stroke-dasharray: 150% 150%;
    stroke-width: 0.5px;
    -webkit-animation: kibunya 5s linear;
    animation: kibunya 5s linear;
    animation-delay:1.5s;     
}
@-webkit-keyframes kibunya {
  0% {
    stroke-dashoffset: 150%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}

@keyframes kibunya {
  0% {
    stroke-dashoffset: 150%;
  }
  100% {
    stroke-dashoffset: 0%;
  }
}
svg {
    display: inline-block;
    margin: 0 auto;
    line-height: 1;
    height: 4rem;
    vertical-align: middle;
}

調整の仕方

textの後ろに記載されているXとYは、場所の指定をしています。
X＝”0″のところは横リスト
Y＝”0″のところは縦リスト

マイナスの指定も可能です。X=”-10％”としたら、少し左に設置される感じです。

dxやdyと書くと、一文字ずつに位置を当てることもできます。

dyで位置の指定や装飾をする

dyは一文字ずつに指定ができるので、装飾で文字をカーブさせたいときに便利です。
以下の文字列を曲げたいとき、一つずつの文字をspanで囲んだり、Javascriptを使うとか手間ですよね。
文字の順番に合わせて指定してあげればいいので、簡単に曲げられます。

曲げてみるDEMO

HTMLに書いたのはこれだけ。dyで文字の位置を指定して、rotetは傾きを指定します。

　
<svg><text x="0%" y="50%" dy="-1,-5,-4,1,4" rotate="-15,-10,0,10,15">ABCDE</text></svg>

注意点として、HTMLに直接書くのでテキストの内容修正があると手間です。