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

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

#1. 完成版

See the Pen Fire Text Animation by hiroya iizuka (@hiroyaiizuka) on CodePen.

#2. 参考文献
CSS Burning Text Animation
炎の画像サイト

#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;
}

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

❷.

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

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;
}

・background-clip
背景画像をどこまで表示するかという設定をするプロパティです。background-clip:text で、背景画像を文字だけに設定できます。ただし、最初に-webkit をつけないとうまく作動しないようです。こちらの記事に、大変わかりやすくまとめてありました。

・text-fill-color
text-fill-color をtransparent で透明にすることによって、背景の画像の炎を出してます。こちらも、ベンダープレフィックスの-web-kitをつけないといけません。こちら　の記事にも簡潔にまとまっておりましたので、ご参照ください。

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

styles.css

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

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

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