CSS animation で遊び倒す - Fire  Text animation-

CSS animation day21 となりました。
今日は都心で雪が降るそうです。

少しでもあったまるように、本日は、文字の中に炎が出てくるEffect を学びましょう。


#1. 完成版
![ダウンロード (48).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/e6378286-eaba-a7e9-9e9b-5743daa1321c.gif)

<p class="codepen" data-height="402" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="VgXBoO" style="height: 402px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Fire Text Animation">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/VgXBoO/">
  Fire Text Animation</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#2. 参考文献
[CSS Burning Text Animation](https://www.youtube.com/watch?v=gifUJW8V-SA)
[炎の画像サイト](https://www.kisspng.com/png-flame-fire-png-54362/)

#3. 分解してみる

❶. 
炎画像を、参考文献からダウンロードし、画面に文字と一緒に出します。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="flame">
        <h1><span>CSS Animation</span></h1>
      </div>
    </div>
  </body>
</html>
```

```styles.css
body {
  margin: 0px;
  padding: 0px;
  background: #000;
  display: flex;
  justify-content: center;
}

.container {
  width: 100%;
  height: 300px;
  margin: 100px auto;
  transform: translateY(50%);
}

h1 {
  color: #fff;
  font-size: 80px;
  text-align: center;
}

span {
  height: 300px;
  width: 100%;
  background-image: url("../img/flame.png");
  background-position: 0 -1000px;
}
```

<img width="858" alt="スクリーンショット 2019-02-11 10.07.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/f04feda7-b899-a98e-6d26-3e64caaf8d2b.png">

いいですね、ちょっとあったまってきました。

❷.

次に、背景の炎を、文字の中に移しましょう。

```styles.css
span {
  height: 300px;
  width: 100%;
  background-image: url("../img/flame.png");
  background-position: 0 -1000px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

<img width="861" alt="スクリーンショット 2019-02-11 10.21.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/8705e611-ac33-6bd3-469a-6353d54029d1.png">

・[background-clip](https://developer.mozilla.org/ja/docs/Web/CSS/background-clip) 
背景画像をどこまで表示するかという設定をするプロパティです。background-clip:text で、背景画像を文字だけに設定できます。ただし、最初に-webkit をつけないとうまく作動しないようです。[こちら](https://www.i-ryo.com/entry/2018/09/13/131709) の記事に、大変わかりやすくまとめてありました。

・[text-fill-color](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color)
text-fill-color をtransparent で透明にすることによって、背景の画像の炎を出してます。こちらも、ベンダープレフィックスの-web-kitをつけないといけません。[こちら](http://yachin29.hatenablog.com/entry/2018/02/27/020629)　の記事にも簡潔にまとまっておりましたので、ご参照ください。

❸.
それでは、アニメーションを設定しましょう。

```styles.css
span {
  ...
  animation: fire 4s linear infinite;
}

@keyframes fire {
  0% {
    background-position: 0% -50%;
  }
  100% {
    background-position: 0% -25%;
  }
}
```

![ダウンロード (48).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/2d091464-81b4-fb97-6441-eb0af6409b23.gif)


完成しました！　
では、風邪ひかないようにお過ごしください〜　
また明日！