【CSS】文字をぼやけた状態から表示するアニメーション

文字がぼやけた状態から表現されるアニメーションをCSSで作っていきます。CSSアニメーションは色々できますねぇ。

1 アニメーション動画
2 HTML作成
3 CSS作成
4 CSSコーディングのオススメ本

アニメーション動画

こんな感じで、ぼやけた状態から文字が表現されるアニメーションを作っていきます。

HTML作成

HTMLは表現したい文字を1つのdivで囲みます。
class名は任意でOK。

<div class="blur-box">BLUR</div>

CSS作成

CSSでアニメーションの設定をしていきます。

.blur-box{
  animation-name: blur;
  animation-duration: 1.3s;
  animation-fill-mode:forwards;
  animation-iteration-count: infinite;
  font-size: 4rem;
  font-weight: bold;
  color: #fff;
}

@keyframes blur{
  from {
    filter: blur(50px);
  }

  to {
    filter: blur(0) drop-shadow(5px 5px 5px rgba(21, 124, 147,0.5));
    transform: scale(3);
  }
}

blur-boxの設定

.blur-box{
  animation-name: blur;
  animation-duration: 1.3s;
  animation-fill-mode:forwards;
  animation-iteration-count: infinite;
  font-size: 4rem;
  font-weight: bold;
  color: #fff;
}

.blur-boxにはアニメーションの設定とフォントの設定を行っています。
アニメーションの設定は以下の通りです。

animation-name: blur;

アニメーション名の設定。
「blur」部分は任意でOK。

animation-duration: 1.3s;

1回のアニメーションが終了するまでの所要時間。
数値を上げる程ゆっくりになります。

animation-fill-mode:forwards;

アニメーション実行前後の指定。
前後の指定と言われても意味がわかりにくいですが、アニメーション終了後にどのスタイルを適用させるかというプロパティになります。
設定している「forwards」は、アニメーションが終了した時、100％（to）のスタイルを適用させています。

animation-iteration-count: infinite;

アニメーションの繰り返しを指定。
「infinite」は無限に再生を繰り返す設定になります。

animationは1つにまとめて省略できます

今回の設定はわかりやすい様にそれぞれを記述していますが、以下の様に省略できます。

animation-name: blur;
animation-duration: 1.3s;
animation-fill-mode:forwards;
animation-iteration-count: infinite;

↓省略

animation: blur 1.3s forwards infinite;

@keyframesの設定

@keyframes blur{
  from {
    filter: blur(50px);
  }

  to {
    filter: blur(0) drop-shadow(5px 5px 5px rgba(21, 124, 147,0.5));
    transform: scale(3);
  }
}

fromは0%、toは100%という意味になります。

filter: blur(50px);

ぼやかす設定。
数値が多いほどぼやけます。

transform: scale(3);

文字自体の大きさを変更する設定。

CSSコーディングのオススメ本

CSS辞典第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。