Crossfade
クロスフェード
どんな動き？
表示中の画像がフェードアウトすると同時に、次の画像がフェードインして重なりながら切り替わるアニメーション。カットが唐突に変わらず、なめらかに次のビジュアルへ移行できるため、ヒーローエリアのスライドショーや事例紹介のギャラリーで定番の切り替え方法として使われる。
よく使う場所
ヒーロースライドショー事例ギャラリー背景演出
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Fade the current image out while the next image fades in on top of it, looping continuously.Trigger:
Load, then repeats continuously on a timer.
Initial state:
Image A: opacity: 1
Image B: opacity: 0 (stacked on top of A)
Animation:
Image A fades out while Image B fades in at the same time, then the roles swap for the next pair.
Final state:
Image A: opacity: 0
Image B: opacity: 1
Timing:
duration: 1.2s per crossfade, hold: 3s, easing: ease-in-out, loops indefinitely.実装方法の候補
この動きは以下の技術で実装できます。
CSS animationJavaScript (class toggle)
別名・関連ワード
Cross FadeFade TransitionImage Crossfade