ウェブサイトに洗練された印象を与える、モダンなテキストアニメーション。 この記事では、「フェード」と「ブラー（ぼかし）」を組み合わせたCSSアニメーションのコードを5つ厳選しました。
表示中もさりげなく動き続け、マウスホバーでさらに変化するリッチな表現を、コピペだけで簡単に実装できます。すべてWordPressテーマ「SWELL」で動作確認済み。ご自身のサイトに合わせて微調整する方法も合わせて解説します。
Floating Blur Reveal（浮遊＆ブラー）
出現時はぼかしが晴れながら浮かび上がり、待機中はゆっくりと宙を漂うようなアニメーションです。マウスホバーでピタッと静止し、文字が完全にクリアになります。
See the Pen Floating Blur Reveal by BaseKENT (@basekent) on CodePen.
調整方法
- フォントサイズ (
font-size):2remの数値を変更して大きさを調整します。 - 浮遊の幅 (
translateY(-8px)):@keyframes floating内の数値を大きくすると、上下に動く幅が広がります。 - ホバー時の拡大率 (
scale(1.05)):1.1などにすると、ホバー時にもっと大きく迫ってきます。
Breathing Blur（呼吸するブラー）
まるでテキストが呼吸しているかのように、ぼかしと透明度がゆっくりと変化し続けます。ホバーすると文字間隔がスッと広がり、鮮明な黒文字になります。
See the Pen Breathing Blur by BaseKENT (@basekent) on CodePen.
調整方法
- 呼吸のスピード (
4s):animationプロパティの4sを2sにすると、より速いペースで点滅（呼吸）します。 - ホバー時の文字間隔 (
letter-spacing):0.2emを変更することで、ホバー時の文字の広がり具合を調整できます。
Neon Shadow Blur（ネオンシャドウ＆ブラー）
黒文字の後ろで、淡い影（シャドウ）がブラーを伴ってゆっくりと明滅します。モダンで少しミステリアスな雰囲気を演出でき、ホバーで影が実体化します。
See the Pen Neon Shadow Blur by BaseKENT (@basekent) on CodePen.
調整方法
- 影の濃さ (
rgba(0,0,0,0.2)): 最後の数値（透明度）を0.4などに上げると、影がより濃く、目立つようになります。 - ホバー時の浮き上がり (
translateY(-3px)): 数値を大きくする（例:-6px）と、ホバー時により高く浮き上がります。
Wave Blur（波打つブラー）
テキストのブラー強度が波のように一定周期で変化し、常に揺らめいているような視覚効果を生み出します。ホバーで瞬時にピントが合います。
See the Pen Wave Blur by BaseKENT (@basekent) on CodePen.
調整方法
- 波のリズム (
5s): 時間を短くすると小刻みにぼやけ、長くするとゆったりとピントがズレるような演出になります。 - 最大ブラー強度 (
blur(3px)): キーフレーム内の3pxを5pxなどにすると、最もぼやけた時により形が崩れます。
Glitch & Blur Focus（微細なグリッチ＆ブラー）
時折、一瞬だけブラーが強くかかったりかすれたりする、デジタルノイズ（グリッチ）のようなモダンな動きを取り入れています。ホバーでノイズが完全に収まります。
See the Pen Glitch & Blur Focus by BaseKENT (@basekent) on CodePen.
調整方法
- ノイズの頻度 (
6s): 秒数を変更することで、ノイズが走る間隔を調整できます。短くするとより不安定な印象になります。 - ホバー時の傾き (
skewX): ホバー時のskewX(-5deg)を削除すれば、傾かずに真っ直ぐなままピントが合うようになります。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
