コピペで使えるCSSテキストアニメーション5選【モノクロ・インパクト重視】

Webサイトのアクセントになる、モノクロでインパクトのあるCSSテキストアニメーションを紹介します。今回は「Contents」という見出しを想定し、表示時とホバー時に動きが出るコードを厳選しました。WordPress（SWELL）などのHTMLブロックに貼り付けるだけで実装可能です。

The Glitch（ノイズ・グリッチ）

See the Pen TEXT-animation by BaseKENT (@basekent) on CodePen.

【調整方法】

• フォントサイズ: .glitch-text の font-size を変更。
• 揺れの激しさ: glitch-anim 内の clip-path の数値を変更するか、left: 2px の値を大きくするとズレが大きくなります。

The Split Cut（上下分割）

See the Pen The Split Cut by BaseKENT (@basekent) on CodePen.

【調整方法】

• スライスの位置: polygon の 50% を変更すると、分割位置が変わります。
• ズレ幅: ホバー時の translate の値を変更してください。

The Block Reveal（ブロック・リビール）

See the Pen The Block Reveal by BaseKENT (@basekent) on CodePen.

【調整方法】

• スピード: animation の 1s や 0.5s を変更。
• ブロックの色: .reveal-wrapper::after の background を変更。

The Phantom Blur（残像・ブラー）

See the Pen The Phantom Blur by BaseKENT (@basekent) on CodePen.

【調整方法】

• 文字の太さ: font-weight を変更。細いほど儚く、太いほど力強くなります。
• ボケ具合: filter: blur(Xpx) の値を調整してください。

The Strike & Invert（打ち消し線・反転）

See the Pen The Strike & Invert by BaseKENT (@basekent) on CodePen.

【調整方法】

• 線の太さ: .strike-text::before の height を変更。
• 枠線: .strike-wrapper の border を削除すれば枠なしになります。

Unlock Your Creativity…

今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。

Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。