【mask-image】CSSだけでつくる！スクロール時のフェードインアニメーション｜下からふわっと表示させる方法

スクロールに応じて「下からふわっと現れる」— あの自然なフェード感は CSSマスク が肝です。

この記事では、フェード演出でよく使う mask-image／mask-size／mask-position と、挙動の理解に必須の mask-mode を軸に、
実務で困りがちなポイントまで丁寧に解説します。

まず「マスク」とは？

マスク = 要素を“画像”で切り抜く(隠す) 仕組み。
不透明（=見える）⇄ 透明（=見えない） を段階的に扱えるので、クリップ（clip-path）より柔らかな表現が可能です。
mask-image に グラデーション を使えば、きれいに溶けるフェードが作れます。

早速マスクのフェードインを見てみよう!

■ マスクありのフェードイン👇

See the Pen フェードインアニメーション by 小林祐也 (@ulfntssw-the-animator) on CodePen.

■ マスクなしのフェードイン👇

See the Pen フェードインアニメーション(マスクなし) by 小林祐也 (@ulfntssw-the-animator) on CodePen.

見比べるとmask-imageを使用したグラデーションがあることでよりフェード感が増しますね!

CSS解説

それでは早速CSSの各プロパティの説明をしていきます!

.fade-up {
  width: fit-content;
  opacity: 0;
  /* ② マスク画像（下へ向かって透明になる直線グラデーション） */
  mask-image: linear-gradient(to bottom, #000, #000 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
  /* Safariの旧実装対策をしたい場合だけ -webkit- も併記（後述） */
  -webkit-mask-image: linear-gradient(to bottom, #000, #000 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);

  /* ③ マスクを大きめに（縦300%）して “動かす余白” を確保 */
  mask-size: 100% 300%;
  -webkit-mask-size: 100% 300%;

  /* ④ 初期は一番下に配置（下側が隠れている状態） */
  mask-position: 0 100%;
  -webkit-mask-position: 0 100%;
  
  /* 見た目のトランジション（要素を上へ動かす＋不透明化） */
  transform: translateY(30px) scale(1.02);
  transition: all 1.5s ease-out;
  will-change: opacity, transform, mask-position;
}

.fade-up.is-visible {
  opacity: 1;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transform: translateY(0) scale(1);
}

① アニメーションに関連するプロパティ

• opacity: 0 → 1
  透明から徐々に表示させる
• transform: translateY(30px)
  下にずらして「下から浮き上がる」動きを演出
• mask-image
  下方向にグラデーションをかけて、自然なフェード感を強化
• transition
  アニメーションの時間（1.5s）と動きを指定

② mask-imageで画像の表示をグラデーションに

mask-image: linear-gradient(
  to bottom, 
  #000 33%, /* ここまで完全に表示 */
  rgba(0, 0, 0, 0) 66%, 
  rgba(0, 0, 0, 0) 100%  /* 下端で完全に透明（=隠す）*/
);

③ mask-sizeで動かす余白を用意する

mask-size: 100% 300%;

mask-size は background-size と同じ感覚で捉えられます。
フェードを「下から上へスライド」させたい場合、縦方向を大きめ（例：300%） にしておくと、mask-position を動かしたときに グラデーションの“描画余白” が足りなくなる事故を防げます。

④ mask-positionでマスクしたグラデーションを動かす

mask-imageのグラデーションを下に動かすことで、
マスクする範囲が透明な場所から不透明な場所へ変化していきます。
これが自然なフェードを再現しています。

.fade-up {
  mask-position: 0 100%; /* 初期位置 */
}

.fade-up.is-visible {
  mask-position: 0 0; /* 画像を表示する場合の位置 */
}

おまけ : will-changeって何?

will-change とは？

will-change プロパティは、
「これから変化する予定のプロパティ」をブラウザに事前に伝える ことで、アニメーションやトランジションを滑らかにするための仕組みです。

例えば、スクロール時や hover 時に opacity や transform を変更するアニメーションをつけるとき、
ブラウザは変更が起こるたびに「レイアウト → ペイント → コンポジット」という重い処理を行います。

そこで will-change を指定しておくと、
ブラウザが あらかじめ最適化（レイヤー化など） を行ってくれるので、アニメーションがカクつきにくくなります。

mask-imageのフェードインを使用しているサイト

以下のサイトは商品を紹介する特設サイトです。
スクロールして画像が読み込まれる際に、マスクを使用したフェードインが確認することができます!

2025 AUTUMN きらめく透け感紅茶ティント ‘Bitter Sweet Tea’ | OPERA（オペラ） | コスメティック[公式]

2025 AUTUMN きらめく透け感紅茶ティント ‘Bitter Sweet Tea’ | OPERA（オペラ） | コスメティック[公式]