「ただ表示される」だけでは物足りないあなたへ。 隠されていた文字がスッと現れる「マスク＆リヴィール」のアニメーションは、見る人の視線を強く惹きつけ、洗練された印象を与えます。
この記事では、出現時のインパクトだけでなく、表示中も退屈させない「待機アニメーション」と、マウスを乗せた時の「ホバーエフェクト」を完備したCSSコードを5つ紹介します。SWELLなどのWordPressテーマですぐに使えるモダンな演出をぜひ取り入れてください。
Slide Up & Breathe（スライドアップ＆ブリーズ）
見えない枠の下から文字がスッと上がり、その後は呼吸するようにゆっくりと拡大縮小を繰り返します。ホバーすると文字間隔が広がり、開放的な印象を与えます。
See the Pen Slide Up & Breathe by BaseKENT (@basekent) on CodePen.
調整方法
- 出現スピード (
1s):animationの1sを変更すると出現の速さが変わります。 - ホバー時の文字間隔 (
0.1em): 数値を大きくすると、ホバー時により広く文字が開きます。
Block Reveal & Shimmer（ブロックリヴィール＆シマー）
黒いブロックが文字の上を通り過ぎることでテキストが出現します。待機中は文字の上を光沢（シマー）が走り続け、高級感を演出。ホバーでブロックが戻ってきます。
See the Pen Block Reveal & Shimmer by BaseKENT (@basekent) on CodePen.
調整方法
- ブロックの色 (
background: #111):::after内の色を変えると、通り過ぎるブロックの色が変わります。 - 光沢の速度 (
3s):shimmerの秒数を変えると、キラリと光る速さが変わります。
Clip Slide & Skew（クリップスライド＆スキュー）
斜めに切り取られたマスクの中から、文字がスライドして現れます。待機中は少し斜体（スキュー）のままユラユラと揺れ、ホバーで直立してピシッと整います。
See the Pen Clip Slide & Skew by BaseKENT (@basekent) on CodePen.
調整方法
- マスクの斜め具合:
.mask-clip-skewのclip-pathの%を調整するとマスクの形が変わります（矩形にしたい場合はpolygon(0 0, 100% 0, 100% 100%, 0 100%)にします）。 - 待機中の揺れ:
@keyframes skewIdleのtranslateXやskewXの値を変更して調整します。
Center Line Open（センターライン・オープン）
中央から上下に分割された線が開き、そこから文字が出現します。待機中は下線が常にアニメーションし、ホバーすると線が太くなって強調されます。
See the Pen Center Line Open by BaseKENT (@basekent) on CodePen.
調整方法
- 線の太さ (
height: 2px):::afterのheightを変更すると基本の線の太さが変わります。 - 出現順序:
animationの遅延時間（0.5sなど）を調整することで、「線が伸びる→文字が出る」のタイミングを変更できます。
Blind Reveal（ブラインド・リヴィール）
ブラインドが開くように、文字が細かく分割されて出現するような錯覚を与える（実際はクリップパスの変化）アニメーションです。待機中は微細なノイズが走り、ホバーで完全にクリアになります。
See the Pen Blind Reveal by BaseKENT (@basekent) on CodePen.
調整方法
- 出現のコマ数 (
steps(5)): 数値をsteps(10)などに増やすと、より滑らかに表示されます。逆に減らすとカクカクしたデジタル感が増します。 - 待機中のノイズ:
@keyframes blindNoiseのinsetの数値を0%に近づければ動きが小さくなり、大きくすればグリッチ感が強まります。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
