CSS animation で遊び倒す -  Text Smoke Animation -

CSS animation day 45 となりました。

そろそろ継続がしんどくなってきました。　
が、日本の医療の未来のために、頑張ります。


#1. 完成版
![ezgif.com-optimize (13).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/4476541e-83da-fe99-7053-410ce9adbb04.gif)


#2. 参考文献
[Pure CSS Text Reveal From Smoke Animation Effect | CSS Animation Tutorial ](https://www.youtube.com/watch?v=lx3UtGiRcYA)
[煙の動画](https://drive.google.com/file/d/1ncI67cgjRGoQZHF6I0dEpXwvFwCKxFPK/view)
#3. 分解してみる


❶. 
マークアップしましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="smoke">
      <span>L</span>
      <span>O</span>
      <span>A</span>
      <span>D</span>
      <span>I</span>
      <span>N</span>
      <span>G</span>
    </div>
    <video src="img/smoke.mp4" id="video" autoplay muted></video>
  </body>
</html>
```


```styles.scss
body {
  margin: 0;
  padding: 0;
  background: #000;
}

.smoke {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

span {
  color: #fffddd;
  font-size: 24px;
  display: inline-block;
  width: 2%;
  height: 2%;
  padding: 10px;
  text-align: center;
  line-height: 40px;
}
```

![スクリーンショット 2019-03-08 15.50.04.png](https://qiita-image-store.s3.amazonaws.com/0/232715/d0b23183-193d-9376-cf2e-f0c7d10ff614.png)



ここまでは、昨日の作品とほぼ同じですね。
<br/>
❷.
文字のアニメーションを考えましょう。

ラインが横にながれて、そこから文字が出現し、最後に煙によって、文字が全て消えるように作ります。

___
`1: ラインを作って、動かす`

これには、before擬似要素で、borderを作ります。

```stylyes.css
.smoke:before {
  content: "";
  background: #fffddd;
  width: 50%;
  height: 1px;
  top: 55%;
  position: absolute;
}
```

![スクリーンショット 2019-03-08 16.45.39.png](https://qiita-image-store.s3.amazonaws.com/0/232715/4907fedb-536c-0252-e908-5c7cae9412c3.png)


次に、borderを動かしましょう。

```styles.scss
.smoke:before {
  content: "";
  background: #fffddd;
  width: 50%;
  height: 1px;
  position: absolute;
  top: 55%;
  animation: lineReveal 0.3s ease-in-out forwards;
}

@keyframes lineReveal {
  0% {
    left: 0%;
  }
  100% {
    left: 25%;
  }
}
```

![ダウンロード (48).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/1c97b652-6e4f-ec80-a13b-816230dbbe68.gif)


いい感じです。

`2: テキストが、線から出るようにしましょう。`

```styles.scss

span {
  color: #fffddd;
  font-size: 24px;
  display: inline-block;
  width: 2%;
  height: 2%;
  padding: 10px;
  text-align: center;
  line-height: 40px;
  animation: textReveal 0.8s ease-out both;
}


@keyframes textReveal {
  0%,
  60% {
    margin-top: 100px;
    opacity: 0;
  }

  100% {
    margin-top: 5px;
    margin: 1;
  }
}
```
![ダウンロード (50).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/63e39e36-3f09-5f1b-e800-98c8b2215544.gif)

<br/>
❸.
smoke effect を作ります。
video タグを使用して参考文献の動画を呼び込みましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="smoke">
      <span>L</span>
      <span>O</span>
      <span>A</span>
      <span>D</span>
      <span>I</span>
      <span>N</span>
      <span>G</span>
    </div>
    <video src="img/smoke.mp4" id="video" autoplay muted></video>
  </body>
</html>

```

```styles.scss

#video {
  position: fixed;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  background-size: cover;
  z-index: -1;
}
```

![ezgif.com-optimize (13).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/956e5b5f-7f62-11de-4336-ec463e707a77.gif)


ポイントは、
・煙の動画を配置するときは、position: fixed にし、右下に配置します。そこに、width, height をautoに設定します。

・autoplay の設定で、読み込みが終了したら、自動で即座に再生します。


本日は以上となります。
素敵な動画とCSS アニメーションがあれば、無限の表現ができそうですね。
それでは、また明日〜