cross-fade()

概要

画像の切り替えや重ね合わせをCSS単体で実現できる関数です。JavaScriptを使わずに画像のクロスフェード効果を作成でき、背景画像やコンテンツ画像に適用できます。透明度を指定して2つの画像を滑らかに合成します。

対応ブラウザ

基本構文

.element {
  background-image: cross-fade(
    url(image1.png) 75%,
    url(image2.png)
  );
}

実務での使いどころ

• 画像の段階的な切り替え

  ホバー時やスクロール位置に応じて、2つの背景画像を滑らかにブレンドする視覚効果を実現します。

注意点

アクセシビリティ

• 装飾目的のクロスフェードは情報伝達に依存しないようにし、重要な画像にはalt属性を適切に設定してください。

参考リンク

• MDN Web Docs — cross-fade()
• Can I use — cross-fade()