【CSS】ぼかした文字を徐々にくっきり表示するアニメーション

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSでぼかした文字を徐々にくっきり表示するアニメーションの作り方をご紹介しています。

CSSでぼかした文字をくっきり表示するアニメーションを作りたいな。良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

CSSで文字をぼかすには

CSSで文字をぼかす方法として、下記のプロパティを使用した方法がよく採用されています。

filter: blur(n);
text-shadow

各プロパティでぼかした文字をくっきり表示するアニメーションを作成したいと思います。

filter: blurを使ったアニメーション

filiterのblurを使って文字をぼかし→くっきりさせるアニメーションを作ってみます。blurはぼかし効果をピクセルで指定することができるため、徐々にぼかしがなくなるアニメーションになるように設定します。

HTML

<h1>Into the Program</h1>

CSS

@keyframes blur {
    from {
        filter: blur(10px);
    }
    
    to {
        filter: blur(0);
    }
}

h1 {
    font-size: 3.2rem;
    color: #fff;
    animation: blur 3s both ease-in;
}

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

text-shadowを使ったアニメーション

text-shadowを使ったアニメーションです。filterと比べると指定するプロパティが多くなりますが、blurとはまた違ったアニメーションになりますので、好みの方を使ってください。

HTML

<h1>Into the Program</h1>

CSS

@keyframes blur {
    from {
        color: transparent;
        text-shadow: 0 0 30px rgba(255, 255, 255, 1);
    }
    
    to {
        color: #fff;
        text-shadow: 0;
    }
}

h1 {
    font-size: 3.2rem;
    animation: blur 3s both ease-in;
}

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

最後に

何年か前のことですが、ネット閲覧中に海外サイトのキービジュアルでぼかしたテキストをくっくり表示させるアニメーションがあって、記憶を頼りにアニメーションを再現してみました。海外サイトのはもっと素敵だったような気がしますが、ある程度再現はできたのでよしとしておきます。みなさんも本記事の内容を参考に素敵なアニメーションを作ってみてくださいね！

以上、CSSでぼかした文字を徐々にくっきり表示するアニメーションの作り方のご紹介でした！