Fade In / Fade Out (フェードイン/フェードアウト)
別名 Fade
要素がその場で完全な透明から完全な不透明へ変わり、退場時はその逆になります。
使いどころ
モーダル、トースト、ページコンテンツの表示
バリエーション
- in
- out
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にフェードイン/フェードアウト(Fade In / Fade Out)のアニメーションを追加してください。フェード(fade)とも呼ばれます。
現れるときは要素がその場で完全な透明からはっきり見える状態へ変わり、消えるときは同じようにフェードアウトするようにしてください。穏やかに、移動や拡大縮小はなしで。
消えた後はクリックもキーボード操作もできないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は瞬時に切り替えてください。似ているモーション
ABCD
Blur In (ブラーイン)
別名 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
要素が強くぼやけた状態から徐々にピントが合い、多くの場合スライドやフェードインを伴います。
使いどころ
見出しやヒーローテキストの表示
[適用する場所]にブラーイン(Blur In)の登場アニメーションを追加してください。テキストフォーカスイン(text focus in)、フォーカスイン(focus in)、ブラーテキストリビール(blur text reveal)とも呼ばれます。
コンテンツが強くぼやけて透明な状態から、その場でピントが合っていくようにしてください。柔らかくややゆっくりで、位置は動かしません。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初からくっきり表示してください。A
B
クリックしてください
Fade Through (フェードスルー)
別名 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
出ていくコンテンツが完全にフェードアウトしてから、入ってくるコンテンツがわずかに拡大しながらフェードインします。
使いどころ
関連のない画面どうしの切り替え
[適用する場所]にフェードスルー(Fade Through)のページトランジションを追加してください。フェードスルートランジション(fade-through transition)、アウトインルートトランジション(out-in route transition)とも呼ばれます。
まず出ていくコンテンツを素早く完全にフェードアウトさせ、そのあと入ってくるコンテンツをわずかに拡大しながら所定の位置にフェードインさせてください。
2つが重なる瞬間は作らず、拡大中に入ってくるコンテンツのレイアウトがずれないようにしてください。A
B
クリックしてください
Crossfade Page Transition (クロスフェードページトランジション)
別名 Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
古いページがフェードアウトし、同じ場所に新しいページがフェードインします。
使いどころ
標準的なページ遷移
[適用する場所]にクロスフェードページトランジション(Crossfade Page Transition)を追加してください。クロスディゾルブ(cross-dissolve)、フェードトランジション(fade transition)とも呼ばれます。
ページを移動するとき、古いページのフェードアウトと同時に、同じ場所へ新しいページをフェードインさせてください。やわらかく、やや速めに。
フェード中に何もずれないよう両方のページを同じ位置に置き、切り替え後は新しいページのメイン見出しにフォーカスを移してください。Fade Up (フェードアップ)
別名 Fade In Up, Reveal on Scroll
要素が少し浮き上がりながらフェードインし、所定の位置に落ち着くように見えます。
使いどころ
スクロールで現れるセクション見出し、カード、画像
[適用する場所]にフェードアップ(Fade Up)の登場アニメーションを追加してください。フェードインアップ(fade-in-up)、スクロールリビール(reveal on scroll)とも呼ばれます。
要素が初めて画面に入ったとき、少し浮き上がりながらフェードインするようにしてください。控えめで素早く、弾むような動きは不要です。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。Entrance & Exitのほかのモーション
A
Fade In Directional (ディレクショナルフェードイン)
別名 Fade In Down, Fade In Left, Fade In Right
要素が片側から少しだけ移動して最終位置に収まりながらフェードインします。
使いどころ
読み込み時やスクロールで現れるセクション、カード
[適用する場所]にディレクショナルフェードイン(Fade In Directional)の登場アニメーションを追加してください。フェードインレフト(fade in left)、フェードインライト(fade in right)、フェードインダウン(fade in down)とも呼ばれます。
要素が片側から少しだけ移動して最終位置に収まりながらフェードインするようにしてください。素早く滑らかに、着地で減速し、弾みはなしで。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。A
Fade Out Directional (ディレクショナルフェードアウト)
別名 Fade Out Up, Fade Out Down
要素が一方向へ流れるように移動しながらフェードアウトします。
使いどころ
通知やカードを閉じるとき
[適用する場所]にディレクショナルフェードアウト(Fade Out Directional)の退場アニメーションを追加してください。フェードアウトアップ(fade out up)、フェードアウトダウン(fade out down)とも呼ばれます。
要素が一方向へ少しだけ移動しながらフェードアウトするようにしてください。素早く、去るにつれて加速します。
周りのコンテンツが早く詰まらないよう、フェードが終わってからレイアウトから取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。