テキスト遮幕解除アニメーション
このスニペットは、見出しの各行を clip-path:inset(0 100% 0 0) で右端まで隠した状態から、 @keyframes でクリップ領域をゼロまで開いていく「遮幕（マスク）解除」の文字演出です。
解説
このスニペットは、見出しの各行を clip-path:inset(0 100% 0 0) で右端まで隠した状態から、@keyframes でクリップ領域をゼロまで開いていく「遮幕（マスク）解除」の文字演出です。JavaScript は使わず、CSS の animation と cubic-bezier のイージングだけで、左から布を引くように文字が現れます。span ごとに animation-delay を変えてあるため、1 行目が出てから 2 行目が続く、というリズムが生まれます。
向いている場面
- サイト冒頭のキャッチコピーや、企業理念の一文を印象づけたいとき
- セクションの大見出しを、スクロール到達時に少し演出したいとき
- ポートフォリオやブランドサイトの、静かで上品な導入
カスタマイズは animation-duration で速さ、animation-delay で行ごとの間合いを調整します。行数を増やすときは nth-child の遅延を足してください。文字を覆う親要素に overflow:hidden が要る点に注意。動きが苦手な利用者のため、prefers-reduced-motion 指定時はアニメーションを止め、最初から表示する配慮を加えると親切です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
JavaScript なしで動きますか
はい。clip-path と CSS アニメーションだけで動作するため、追加のスクリプトは不要です。HTML と CSS をそのまま貼るだけで再現できます。
行を増やしたいときはどうしますか
span を追加し、その span に対応する nth-child の animation-delay を新しく指定してください。遅延の値を少しずつ増やすと、上から順に現れるリズムを保てます。