こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、CSSのmask-imageを使って、まるでサーチライトが当たってキラッと光るような文字アニメーションを作る方法をご紹介します。
最近ではロゴやメインビジュアルなどで「一瞬だけ光が走る演出」を入れることで、サイト全体の印象をぐっと引き締めるデザインをよく見かけます。
従来はJavaScriptを使って表現していましたが、今ではCSSだけでスマートに実装可能です。
この記事では基本構造から応用パターンまで、コピペで使えるコード付きでわかりやすく解説します。
mask-imageとは？
CSSのmask-imageは、要素の一部を「マスク（隠す）」するためのプロパティです。
透過画像やグラデーションを使って、どの部分を表示・非表示にするかをコントロールできます。
今回のような「光が横切る」エフェクトでは、グラデーションをmaskとして使うことで、特定部分だけが時間差で見えるようにできます。
- CSSだけで実装可能（JavaScript不要）
- テキストやロゴなどに使える
- アニメーションの方向・速さを自由に調整できる
基本の「キラッと光る」文字アニメーション
まずは、最もシンプルなキラッと光る演出の基本コードを見てみましょう。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
角度（linear-gradient()の第1引数）を調整すれば、光の走る方向を自由に変えることができます。
たとえば左上から右下に光らせたい場合は次のように書き換えます。
mask-image: linear-gradient(45deg, transparent 30%, white 50%, transparent 70%);
また、mask-sizeを大きめにしておくと、より滑らかなアニメーションになります。
応用：ゴールド風のキラッと光る演出
背景のグラデーションを金属調に変えると、ラグジュアリーな「ゴールド風」デザインに仕上がります。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
この手法は、Webサイトのタイトルロゴや見出し、キャンペーンページの強調テキストなどに最適です。
まとめ
mask-imageを活用すると、光の筋が文字の上をスッと横切るような「キラッ」演出をCSSだけで実現できます。JavaScriptを使わず軽量で、パフォーマンスにも優れています。
特にロゴやキャッチコピー部分に取り入れることで、静止した文字にも動きのある魅力をプラスできるでしょう。
satokotadesignキャンペーン実施中！
