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

こんにちは、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でぼかした文字を徐々にくっきり表示するアニメーションの作り方のご紹介でした!

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍