簡単! CSSでできるSVGアニメーション

# svgアニメーションのやり方

この項目はadobe illustratorを持っていることを前提に書いています。


## まずはじめにHTMLの簡単なテンプレートから

```html:index.html
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>SVG アニメーション</title>
	<link rel="stylesheet" href="style.css">
	<style>
	</style>
</head>
<body>

</body>
</html>

```

cssの名前はsyle.css

## 素材作り

<img width="1380" alt="スクリーンショット 2018-06-13 13.42.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/204436/33266c76-f38e-24eb-1b95-3630d10c2fc5.png">

レイヤーの名前は`logo`にして、文字は必ずアウトライン化をしてください


![](https://media.giphy.com/media/3oo26V23K28lwwbPuQ/giphy.gif)

素材ができたら右のタブから***アセットの書き出し***を選び、ドラッグアンドドロップ。名前を決めたら書き出ししよう

## svgについて

svgとはパスなどを指定し描画した画像をcssから形や色を変えることのできる拡張子だ。

　先ほど作ったsvgのコードをみてみよう

```html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.696 78.505">
  <title>アセット 2</title>
  <g id="レイヤー_2" data-name="レイヤー 2">
    <g id="logo"><path d="M54.4,75c-3.5,1.7-10.3,3.4-19,3.4C15.8,78.4,0,65.7,0,39.9,0,15.3,15.3,0,37.6,0,46.7,0,52,1.9,54.4,3.1l-2.2,7A33.086,33.086,0,0,0,37.8,7C20.5,7,8.7,18.6,8.7,39.6c0,20,10.8,31.8,28.6,31.8a37.8,37.8,0,0,0,15.3-3.1Z"/><path
      d="M100.5,10.5A25.9,25.9,0,0,0,87.1,7C76.5,7,72.5,13.5,72.5,19c0,7.5,4.6,11.3,14.8,15.6,12.3,5.2,18.6,11.5,18.6,22.4,0,12.1-8.8,21.4-25.2,21.4-6.9,0-14.4-2.1-18.2-4.8l2.3-6.9a31.072,31.072,0,0,0,16.4,4.7c10.2,0,16.2-5.5,16.2-13.7,0-7.5-4.1-12.1-14-16.1-11.5-4.3-19.3-11-19.3-21.5C64.1,8.5,73.5,0,87.4,0c7.2,0,12.7,1.8,15.6,3.6Z"/><path
      d="M153.2,10.5A25.9,25.9,0,0,0,139.8,7c-10.6,0-14.6,6.5-14.6,12,0,7.5,4.6,11.3,14.8,15.6,12.3,5.2,18.6,11.5,18.6,22.4,0,12.1-8.8,21.4-25.2,21.4-6.9,0-14.4-2.1-18.2-4.8l2.3-6.9a31.075,31.075,0,0,0,16.4,4.7c10.2,0,16.2-5.5,16.2-13.7,0-7.5-4.1-12.1-14-16.1-11.5-4.3-19.3-11-19.3-21.5C116.8,8.5,126.2,0,140.1,0c7.2,0,12.7,1.8,15.6,3.6Z"/><path
      d="M207.3,64.3a76.285,76.285,0,0,0,.8,13h-7.6l-.8-7h-.3a18.949,18.949,0,0,1-16.1,8.2c-10.4,0-15.9-7.6-15.9-15.5,0-13.1,11.4-20.2,31.6-20.1,0-4.6,0-15-12.4-15a23.579,23.579,0,0,0-13.3,3.9l-2-5.7a31.01,31.01,0,0,1,16.6-4.6c15.4,0,19.4,10.9,19.4,21.7ZM199.1,49c-10.3,0-23.2,1.5-23.2,13,0,7,4.4,10.1,9.4,10.1,8.1,0,13.8-6.2,13.8-12.8Z"/><path d="M266.9,77.305h-8.3V45.1c0-8.9-3.2-16.7-12.7-16.7-7.1,0-14.3,6-14.3,15.5v33.4h-8.3V36.8c0-5.6-.2-9.7-.4-14.1h7.4l.5,8.9h.2a19.457,19.457,0,0,1,17.5-10.1c6.8,0,18.4,4.1,18.4,22.6Z"/><path d="M287.1,13.2a5.391,5.391,0,0,1-5.4-5.7,5.445,5.445,0,0,1,5.5-5.6,5.3,5.3,0,0,1,5.4,5.6C292.6,11,290.3,13.2,287.1,13.2Zm4.2,64.1H283V22.8h8.3Z"/><path
      d="M382,77.305h-8.2V45.8c0-10.6-3.8-17.4-12-17.4-6.7,0-12.8,6.3-12.8,14.6v34.3h-8.2V43.7c0-8.7-3.7-15.3-11.4-15.3-7.1,0-13.4,7-13.4,15.5v33.4h-8.2V36.8c0-5.6-.2-9.6-.4-14.1h7.3l.5,8.8h.3c3-5.3,8-10,16.6-10,7.1,0,12.6,4.4,14.9,10.9h.2c3.6-6.5,9.1-10.9,17.5-10.9,6.7,0,17.3,4.3,17.3,23Z"/><path
      d="M433.8,64.3a76.28,76.28,0,0,0,.8,13H427l-.8-7h-.3a18.949,18.949,0,0,1-16.1,8.2c-10.4,0-15.9-7.6-15.9-15.5,0-13.1,11.4-20.2,31.6-20.1,0-4.6,0-15-12.4-15a23.579,23.579,0,0,0-13.3,3.9l-2-5.7a31.011,31.011,0,0,1,16.6-4.6c15.4,0,19.4,10.9,19.4,21.7ZM425.6,49c-10.3,0-23.2,1.5-23.2,13,0,7,4.4,10.1,9.4,10.1,8.1,0,13.8-6.2,13.8-12.8Z"/><path d="M452,12.9l8.2-2.8V22.8h14.1v6.5H460.2V60.8c0,6.9,2.1,10.7,7.4,10.7a16.224,16.224,0,0,0,5.6-.8l.5,6.4a20.96,20.96,0,0,1-8.1,1.3c-13.2,0-13.6-12-13.6-17.8V29.3h-8.4V22.8H452Z"/><path
      d="M523.795,75c-3.1,1.5-8.8,3.4-17.1,3.4-15.9,0-25.4-11.2-25.4-27.5,0-17.1,9.6-29.4,24.3-29.4,16.8,0,21.1,15.4,21.1,24.9,0,1.9-.1,3.3-.2,4.6h-37.1c.1,15.1,8.7,20.8,18.5,20.8A34.448,34.448,0,0,0,522.2,69Zm-5.3-30.2c.1-7.4-3-17-13.7-17-10,0-14.4,9.5-15.2,17Z"/></g>
  </g>
</svg>
```

何やら訳のわからない文字コードが書いてある...

このコード一つ一つがCSSanimateという文字を作っているのだ。

それではこれをHTMLのbodyタグの中にコピペしてみよう

```HTML
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>SVG アニメーション</title>
	<link rel="stylesheet" href="style.css">
	<style>
	</style>
</head>

<body>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.696 78.505">
	  <title>アセット 2</title>
	  <g id="レイヤー_2" data-name="レイヤー 2">
	    <g id="logo"><path d="M54.4,75c-3.5,1.7-10.3,3.4-19,3.4C15.8,78.4,0,65.7,0,39.9,0,15.3,15.3,0,37.6,0,46.7,0,52,1.9,54.4,3.1l-2.2,7A33.086,33.086,0,0,0,37.8,7C20.5,7,8.7,18.6,8.7,39.6c0,20,10.8,31.8,28.6,31.8a37.8,37.8,0,0,0,15.3-3.1Z"/><path
	      d="M100.5,10.5A25.9,25.9,0,0,0,87.1,7C76.5,7,72.5,13.5,72.5,19c0,7.5,4.6,11.3,14.8,15.6,12.3,5.2,18.6,11.5,18.6,22.4,0,12.1-8.8,21.4-25.2,21.4-6.9,0-14.4-2.1-18.2-4.8l2.3-6.9a31.072,31.072,0,0,0,16.4,4.7c10.2,0,16.2-5.5,16.2-13.7,0-7.5-4.1-12.1-14-16.1-11.5-4.3-19.3-11-19.3-21.5C64.1,8.5,73.5,0,87.4,0c7.2,0,12.7,1.8,15.6,3.6Z"/><path
	      d="M153.2,10.5A25.9,25.9,0,0,0,139.8,7c-10.6,0-14.6,6.5-14.6,12,0,7.5,4.6,11.3,14.8,15.6,12.3,5.2,18.6,11.5,18.6,22.4,0,12.1-8.8,21.4-25.2,21.4-6.9,0-14.4-2.1-18.2-4.8l2.3-6.9a31.075,31.075,0,0,0,16.4,4.7c10.2,0,16.2-5.5,16.2-13.7,0-7.5-4.1-12.1-14-16.1-11.5-4.3-19.3-11-19.3-21.5C116.8,8.5,126.2,0,140.1,0c7.2,0,12.7,1.8,15.6,3.6Z"/><path
	      d="M207.3,64.3a76.285,76.285,0,0,0,.8,13h-7.6l-.8-7h-.3a18.949,18.949,0,0,1-16.1,8.2c-10.4,0-15.9-7.6-15.9-15.5,0-13.1,11.4-20.2,31.6-20.1,0-4.6,0-15-12.4-15a23.579,23.579,0,0,0-13.3,3.9l-2-5.7a31.01,31.01,0,0,1,16.6-4.6c15.4,0,19.4,10.9,19.4,21.7ZM199.1,49c-10.3,0-23.2,1.5-23.2,13,0,7,4.4,10.1,9.4,10.1,8.1,0,13.8-6.2,13.8-12.8Z"/><path d="M266.9,77.305h-8.3V45.1c0-8.9-3.2-16.7-12.7-16.7-7.1,0-14.3,6-14.3,15.5v33.4h-8.3V36.8c0-5.6-.2-9.7-.4-14.1h7.4l.5,8.9h.2a19.457,19.457,0,0,1,17.5-10.1c6.8,0,18.4,4.1,18.4,22.6Z"/><path d="M287.1,13.2a5.391,5.391,0,0,1-5.4-5.7,5.445,5.445,0,0,1,5.5-5.6,5.3,5.3,0,0,1,5.4,5.6C292.6,11,290.3,13.2,287.1,13.2Zm4.2,64.1H283V22.8h8.3Z"/><path
	      d="M382,77.305h-8.2V45.8c0-10.6-3.8-17.4-12-17.4-6.7,0-12.8,6.3-12.8,14.6v34.3h-8.2V43.7c0-8.7-3.7-15.3-11.4-15.3-7.1,0-13.4,7-13.4,15.5v33.4h-8.2V36.8c0-5.6-.2-9.6-.4-14.1h7.3l.5,8.8h.3c3-5.3,8-10,16.6-10,7.1,0,12.6,4.4,14.9,10.9h.2c3.6-6.5,9.1-10.9,17.5-10.9,6.7,0,17.3,4.3,17.3,23Z"/><path
	      d="M433.8,64.3a76.28,76.28,0,0,0,.8,13H427l-.8-7h-.3a18.949,18.949,0,0,1-16.1,8.2c-10.4,0-15.9-7.6-15.9-15.5,0-13.1,11.4-20.2,31.6-20.1,0-4.6,0-15-12.4-15a23.579,23.579,0,0,0-13.3,3.9l-2-5.7a31.011,31.011,0,0,1,16.6-4.6c15.4,0,19.4,10.9,19.4,21.7ZM425.6,49c-10.3,0-23.2,1.5-23.2,13,0,7,4.4,10.1,9.4,10.1,8.1,0,13.8-6.2,13.8-12.8Z"/><path d="M452,12.9l8.2-2.8V22.8h14.1v6.5H460.2V60.8c0,6.9,2.1,10.7,7.4,10.7a16.224,16.224,0,0,0,5.6-.8l.5,6.4a20.96,20.96,0,0,1-8.1,1.3c-13.2,0-13.6-12-13.6-17.8V29.3h-8.4V22.8H452Z"/><path
	      d="M523.795,75c-3.1,1.5-8.8,3.4-17.1,3.4-15.9,0-25.4-11.2-25.4-27.5,0-17.1,9.6-29.4,24.3-29.4,16.8,0,21.1,15.4,21.1,24.9,0,1.9-.1,3.3-.2,4.6h-37.1c.1,15.1,8.7,20.8,18.5,20.8A34.448,34.448,0,0,0,522.2,69Zm-5.3-30.2c.1-7.4-3-17-13.7-17-10,0-14.4,9.5-15.2,17Z"/></g>
	  </g>
	</svg>
</body>

</html>

```


一旦この状態でブラウザでみてみよう

<img width="1440" alt="スクリーンショット 2018-06-13 13.59.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/204436/18c9cd79-f1df-e5e4-942c-441f976dc669.png">

これと同じ状態になっていたら成功だ


## アニメーションの適用

それでは次に、style.cssを開き以下の文をコピペして保存しよう

```css
#logo {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0 0 0 -238px
}
path {
	fill: none;
	stroke: #333; /*線の色を指定する*/
	stroke-dasharray: 2000;/*線の間隔を指定する*/
	stroke-dashoffset: 0;/*線の位置を指定する(IEは効かない属性)*/
	stroke-width: 1;/*線の太さを指定する*/
	-webkit-animation: hello 3s ease-in forwards;
	animation: hello 3s ease-in forwards;
}
 @-webkit-keyframes hello {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent; /*透過*/
}
 50% {
 fill:transparent; /*透過*/
}
 100% {
 stroke-dashoffset: 0;
 fill:#333;
}
}
@keyframes hello {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent; /*透過*/
}
 50% {
 fill:transparent; /*透過*/
}
 100% {
 stroke-dashoffset: 0;
 fill:#333;
}
}

```
そうしたらブラウザで見てみよう

![](https://media.giphy.com/media/tK9EUlfgzzNRQj9DZl/giphy.gif)

こうなっていたら成功だ。位置やサイズはそれぞれ調整してくれ


## プロパティについて

`stroke: #333;`で最初に出てきた線の色を指定することができる。

`stroke-dasharray: 2000`これは線と線の間隔を指定できる。最大2000、最低0なのが特徴だ。
50とかに指定すると破線のようにすることができるぞ

`stroke-dashoffset: 0;`線がどこから始まるかを指定できる。ただ、IEでは動かないぞ

`stroke-width: 1;`は線の太さを変えれるぞ。