Fade Up
フェードアップ
どんな動き？
要素が本来の位置より少し下から、透明な状態のまま上方向へ移動しながらフェードインするアニメーション。Webサイトで最もよく使われる登場アニメーションのひとつで、スクロールして要素が画面に入ったタイミングで発火させるのが定番。控えめで上品な印象を与えるため、どんなデザインにも合わせやすい。
よく使う場所
見出し本文カードセクション全体CTAボタン
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Fade up the element when it enters the viewport.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
opacity: 0
translateY: 30px
Animation:
Move upward while fading in.
Final state:
opacity: 1
translateY: 0
Timing:
duration: 0.6s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSSIntersection ObserverGSAPCSS Scroll-driven Animations
別名・関連ワード
Fade In UpScroll FadeSlide Up Fade