【HTML/CSSのみ!】mask-imageを使用したリッチなフェードアニメーション

初のブログ投稿になります。新人エンジニアのナガノマです！

今回はフェードアニメーションにスパイスを加えるべく、mask-imageを使用したアニメーションをご紹介します。

イメージを掴んでいただくために、以下に簡易的なデモを2つご用意しております。

デモ1



デモ2（※Chromeのみ）



maskプロパティの基本

maskプロパティとは

maskとは、文字通りコンテンツをマスク（隠すこと）ができるCSSのプロパティです。

グラフィックソフトを使用したことがある方であれば馴染みが深い用語かと思いますが、

Photoshopにおけるレイヤーマスクなどが機能的に近いです。

backgroundなどと同様、サイズを指定するmask-sizeや、位置を指定するmask-positionなどの個別のプロパティが存在しています。

詳細は使用ケースの部分で改めて触れていきます。

maskの仕組み

コンテンツをマスクするためには、まず最初にマスク用の画像（mask-image）を設定する必要があります。

例としてmask-imageに星型の画像を、マスクをかけたいコンテンツ用に犬の写真を準備しました。

（※mask-imageはlinear-gradientでも指定することができます）

mask-imageを準備する際の注意点ですが、必ず透過背景のものを使用する必要があります。

これは実際にmaskをかけた時の、以下のイメージを見ていただくとわかりやすいかと思います！

mask-image用に準備した画像の色のついた部分だけが残り、それ以外の透過背景の部分は切り抜かれた形となりました。

maskプロパティを使用する上で、まずはこのルールを押さえておくことが重要です。

maskプロパティをアニメーションに活用する

基本のところでもご紹介した、mask-sizeやmask-positionなどを使用することで動きをつけることができます。

冒頭でご紹介した1つ目のデモを元に解説していきます。

まずはマスクをかけたい要素に対して、以下のように記述します。

HTML

<div class="mask__animation">
      <p>mask-image</p>
      <img class="mask__animation--img" src="https://images.unsplash.com/photo-1598133894008-61f7fdb8cc3a?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=karsten-winegeart-BJaqPaH6AGQ-unsplash.jpg&w=640" width="400" height="600" alt="">
</div>

CSS

.mask__animation--img {
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
  mask-size: 250% 250%;
  -webkit-mask-size: 250% 250%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: 130% 130%;
  -webkit-mask-position: 130% 130%;
// 省略
}

2023年現在、Chrome、Edge、Safari（15.3以前）で用いる場合、接頭辞-webkit-が必要です（参考リンク）

基本の部分でも触れた通り、まずはmask-imageにマスク用の透過画像を設定します。

本デモではlinear-gradientを使用し、ベタ塗りではなく、黒→透明のグラデーションを使用することで淡くマスクをかけています。

使用したmask-imageについては、デモのbackgroud-imageの部分に反映されているものをご参照下さい。

mask-size、mask-positionについてはアニメーションに合わせて数値を調整します。

これは個人的な感覚ですが、mask-sizeを100%以上に設定しておくと、100%を超えた分だけmask-positionの設定範囲が広くなり、％を用いた位置調整を行いやすくなるためオススメです！

デモのbackground-imageの部分のbackground-sizeやbackground-positionの数値を調整いただくと、より直感的に理解しやすいかと思います！

最後にkeyframesでmask-positionの位置を補間して完成です！

.mask__animation--img {
　　// 省略
　　animation: mask-animation 1.5s linear forwards;
}

@keyframes mask-animation {
  0% {
　　　mask-position: 130% 130%; 
　　　-webkit-mask-position: 130% 130%;
  }
  100% {
　　　　mask-position: 0 0; 
　　　　-webkit-mask-position: 0 0; 
  }

終わりに

mask-imageを使用したアニメーションについて解説しました。

今回はシンプルなマスクを使用しましたが、波紋や霧模様の画像を適用すると、より面白い演出ができそうです。

まだまだ勉強中の身ですので、色々なパターンを試してみたいと思います！

ご拝読ありがとうございました！