こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Web上の文字演出といえば、colorやbackground-clipを使ったテキストグラデーションが定番ですが、さらに一歩進んだマスクアニメーションを試したことはありますか？
mask-imageとgradientを組み合わせると、背景を透過させた滑らかな文字エフェクトをCSSだけで実現できます。
しかも、JavaScript不要・軽量でパフォーマンスも高いため、ヒーローヘッダーやローディング画面のアクセントに最適です。
この記事では、mask-imageの基本からグラデーションを使ったアニメーションの実装方法まで、
実例を交えながらわかりやすく解説していきます。
mask-imageとは？
mask-imageは、要素の表示部分と非表示部分をマスク画像でコントロールするCSSプロパティです。
- 白（または不透明部分）：表示される
- 黒（または透明部分）：非表示になる
この特性を利用して、文字の一部だけを見せたり隠したりするエフェクトが作れます。
基本コード：グラデーションでマスクする
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードで、文字の上を白と透明のグラデーションが横にスライドし、光が走るようなアニメーションが実現できます。
応用テクニック：複数色・斜め・円形マスク
- 複数色グラデーションでカラフルな演出
- 斜め方向のlinear-gradientで動きに変化をつける
- radial-gradientでスポットライト風エフェクト
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このように、マスク形状とアニメーションパターンの組み合わせで、バリエーション豊かな演出が可能です。
ブラウザ対応と注意点
- 主要ブラウザ（Chrome / Edge / Safari）は対応済み
- Firefoxではmask-imageのサポートが限定的
- ベンダープレフィックス（-webkit-）を必ず付与
- 文字が透明になるため、背景色や画像と組み合わせると効果的
まとめ
CSSだけで作る動く文字エフェクト！
mask-imageとgradientの組み合わせは、軽量かつ表現力豊かな文字演出が可能。
光のラインやスポットライト、カラフルな動きまで、工夫次第で無限に広がります。
JavaScript不要なので、パフォーマンス重視のUIにもぴったりです。
