こんにちは、Ryohei(@ityryohei)です!

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

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

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

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

CSSで文字をぼかすには

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

  • filter: blur(n);
  • text-shadow

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

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

filiterblurを使って文字をぼかし→くっきりさせるアニメーションを作ってみます。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でぼかした文字を徐々にくっきり表示するアニメーションの作り方のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。