CSS Masks活用術

December 02, 2022

この記事はフラー株式会社 Advent Calendar 2022 の2日目の記事です。1日目は@shogo82148で「ラバーダックデバッグのすゝめ」でした。

2022年を振り返ると，最も大きな出来事のひとつに「Internet Explorer（以下，IE）のサポート終了」が思いつきます。これにより多くのWebサービスではユーザーがIEを利用してWebページを閲覧する状況を考慮する必要が無くなりました。開発者としては，IEに対応するために利用を控えていた機能が解禁されました。そんな数ある機能のうち，今回は "CSS Masks" に焦点を当てて，JavaScriptをほとんど書かずに楽しい視覚効果を実装する方法について見ていきます。（マスクも今年の大きな話題でしたからね！🐤）

CSS Masksとは

CSSの clip と mask プロパティを使うと，要素の一部（または全部）を隠したり切り取ったりすることができます。clip はずいぶん昔から多くのブラウザで実装されていたプロパティなのですが，現在は非推奨です。一方で mask は比較的新しいプロパティで，IEでのサポートはありませんでした（* ブラウザ対応状況）。

解禁された `mask` プロパティたち

IEを切ることで，以下の mask プロパティが利用可能になりました。（※ -webkit- プレフィクスをつける必要があります。）

mask-image : 要素のmaskレイヤーを画像で指定する。
mask-position : maskレイヤーの位置を指定する。
mask-size : maskレイヤーの大きさを指定する。
mask-repeat: maskレイヤーをリピートするか否かを指定する。

他にもいくつかの mask プロパティがあるのですが，残念ながら各ブラウザで対応状況が芳しくないため，本記事では取り上げません。

画像をMaskする

mask-image にはgradientプロパティを指定できます。以下の例は線形グラデーションで下方へいくにつれて画像が消えていくような効果を追加しています。

radial-gradient を組み合わせることで，画像を丸型にして，ぼんやりしたフチを演出できます。

さまざまなgradient系のプロパティを駆使すれば，市松模様や縞々模様のマスクを作ることができます。市松模様をつくるために使用している conic-gradient もIEでは動作しないCSSプロパティです。

マウスの位置に合わせてマスクした画像を重ねてあげると，スポットライトのようにできます。

画像表示アニメーションに応用する

実は，いくつかの mask プロパティはCSSアニメーション可能です。画像の読み込みが完了したり，要素がスクロール領域に入ったりしたタイミングで画像をフェードインで表示するような演出はよく用いられますが，これを mask プロパティで味付けすることができます。（ここからのCodePenのサンプルコードではReactを使用していきます。）

まずは比較のために味付けなしの普通のアニメーションです。

以下が mask プロパティでちょいと味付けしたアニメーションたちです。mask-position をアニメーションしています。

最後に mask-size をアニメーションしてみます。

おわりに