Fade In
フェードイン
どんな動き？
要素の位置は変えず、透明な状態から不透明になるだけのシンプルなフェードインアニメーション。移動を伴わないぶん控えめで自然な印象を与え、画像やボタン、モーダルなど様々な要素の登場演出として幅広く使われる。動きを目立たせたくない場面や、他のアニメーションと組み合わせる際のベースとしても重宝される。
よく使う場所
画像セクションモーダルボタンカード
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Fade in the element in place when it enters the viewport, without any movement.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
opacity: 0
Animation:
Fade in without any positional movement.
Final state:
opacity: 1
Timing:
duration: 0.6s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSSIntersection ObserverGSAP
別名・関連ワード
Simple FadeOpacity FadePlain Fade