CSS animation で遊び倒す -  Typewriter  Effect - 

CSS animation day20 となりました。

本日は、TypeWriter Effect を学びます。



#1. 完成版

![ダウンロード (47).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/91cb8d68-2799-14ff-5b2a-40535cc4c450.gif)

#2. なぜか？

[Glorious Demo](https://glorious.codes/demo) という、リアルタイムでコーディングしているかのように見えるライブラリがあります。
最初見たとき、とても画期的なツールだと思いました。だいぶ主観が入りますが、プログラミングを学ぶ時に、本からの静的なコンテンツからの勉強は効率が悪いと感じてます。コードも出来上がるまでに紆余曲折があり、プログラマーの悩みやエラーの修正などをへて、コードが完成します。その生々しい過程を見ることは、私のような初学者にとって重要に思います。ブログの勢いが落ち、Youtubeなどの動画コンテンツに注目が集まるようになった昨今、今後のプログラムの勉強教材はUdemy をはじめとした動画へと移っていくと思ってます。(と言いつつ、Qiitaは、今後も投稿していきます)

長くなりましたが、[よしこさん](http://yoshiko-pg.github.io/)のポートフォリオは、アニメーション +コーディングをブラウザ上で表現でされており、大変感動しました。皆様もぜひご覧ください。


#3. 参考文献
[CSS Tricks](https://css-tricks.com/snippets/css/typewriter-effect/)

#4. 分解してみる

では早速コードを書いていきます。

❶. 

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
   
  </head>
  <body>
    <h1>I learn CSS animation every day.</h1>
  </body>
</html>
```

```styles.css
body {
  margin: 0px;
  padding: 0px;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

<img width="1159" alt="スクリーンショット 2019-02-10 10.27.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/1a748d72-541a-d9dc-0e43-781bafc469bd.png">


では次に、タイプする時に出てくる縦線を作り、背景と文字の色をかえます。

```styles.css
body {
  margin: 0px;
  padding: 0px;
  background: #364548;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  letter-spacing: 3px;
  border-right: 5px solid orange;
}
```

<img width="1070" alt="スクリーンショット 2019-02-10 10.37.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/f72f03f5-05eb-63f5-66aa-0f71e72455d6.png">

いい感じです。
では、アニメーションをつけていきましょう。
どうやったら良いでしょうか？
ヒントは、[以前の記事](https://qiita.com/duka/items/8939f4fba94f901ca66f)です。

❷.


```styles.css

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  letter-spacing: 3px;
  border-right: 5px solid orange;
  overflow: hidden;
  white-space: nowrap;
  animation: type 5s steps(32, end);
}

@keyframes type {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
```
![ダウンロード (46).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/3824c9ec-fbb4-91e7-f710-d4ecdbaf748b.gif)


steps また出てきましたね。
h1のwidth を0% から100% にし、steps で段階的に画面に表示すれば完成です。

その他のポイントは、
`white-space: nowrap` で、文章を1文にしてます。
`overflow: hidden`で要素の幅以上にはみ出た部分を、非表示にしてます。これらは、[サルワカ](https://saruwakakun.com/html-css/basic/white-space) の記事が大変わかりやすく書いてありました。


最後に、オレンジのバーにもアニメーションをつけましょう。

❸.

```styles.css
...

animation: type 5s steps(32), bar 1s step-end infinite;
}

@keyframes type {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes bar {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
```
<img width="808" alt="スクリーンショット 2019-02-10 11.26.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/2ac366c9-a335-8316-baf6-0c2b16658fa9.png">

あれれ、文章が消えてしまいました。全体にopacity: 0つければ、消えてしまうの当たり前ですね。どうしたら良いでしょうか？

・・・

bar は border なので、border の色を変えれば良いですね！　


```styles.css

@keyframes bar {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
  100% {
    border-color: transparent;
  }
}
```

![ダウンロード (47).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/c2f6da7c-0be4-99c5-0736-e008bbfb2e56.gif)

できました。
他に Javascript を使ってもっと細かい表現ができるようです。

それでは、また明日〜