Fade Through (フェードスルー)
別名 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
出ていくコンテンツが完全にフェードアウトしてから、入ってくるコンテンツがわずかに拡大しながらフェードインします。
使いどころ
関連のない画面どうしの切り替え
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にフェードスルー(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)とも呼ばれます。
ページを移動するとき、古いページのフェードアウトと同時に、同じ場所へ新しいページをフェードインさせてください。やわらかく、やや速めに。
フェード中に何もずれないよう両方のページを同じ位置に置き、切り替え後は新しいページのメイン見出しにフォーカスを移してください。A
B
C
Carousel Crossfade (カルーセルクロスフェード)
別名 Fade slideshow, Carousel fade
スライドは位置を変えず、横に動く代わりに互いに溶け合うように切り替わります。
使いどころ
ヒーローのスライドショー、お客様の声
[適用する場所]にカルーセルクロスフェード(Carousel Crossfade)を追加してください。フェードスライドショー(fade slideshow)、カルーセルフェード(carousel fade)とも呼ばれます。
スライドは位置を変えずにゆっくり溶け合うように切り替え、前のスライドがフェードアウトすると同時に次がフェードインし、数秒止まってから次の切り替えに移るようにしてください。
最後から最初のスライドへ途切れなくループさせ、マウスを乗せたときやフォーカス時は一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は自動で進めないでください。A
要素がその場で完全な透明から完全な不透明へ変わり、退場時はその逆になります。
使いどころ
モーダル、トースト、ページコンテンツの表示
[適用する場所]にフェードイン/フェードアウト(Fade In / Fade Out)のアニメーションを追加してください。フェード(fade)とも呼ばれます。
現れるときは要素がその場で完全な透明からはっきり見える状態へ変わり、消えるときは同じようにフェードアウトするようにしてください。穏やかに、移動や拡大縮小はなしで。
消えた後はクリックもキーボード操作もできないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は瞬時に切り替えてください。A
B
クリックしてください
Zoom Page Transition (ズームページトランジション)
別名 Scale transition, Zoom in / out
古いページが拡大または縮小しながらフェードし、新しいページが拡大縮小して所定の位置に収まります。
使いどころ
階層を掘り下げる/さかのぼる移動
[適用する場所]にズームページトランジション(Zoom Page Transition)を追加してください。スケールトランジション(scale transition)、ズームイン/アウト(zoom in / out)とも呼ばれます。
掘り下げるときは古いページが少し拡大しながらフェードアウトし、新しいページが少し小さい状態から拡大して収まるようにしてください。戻るときは逆向きにズームアウトさせます。なめらかで素早く。
拡大縮小は控えめにして常に内容が読めるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードにしてください。Page Transitionのほかのモーション
A
A
Preloader Curtain Lift (プリローダーカーテンリフト)
別名 Splash screen, Intro loader
ロゴやカウンターを載せた全画面のイントロレイヤーが、スライドまたはフェードで消えてサイトが現れます。
使いどころ
サイトの初回読み込み
[適用する場所]にプリローダーカーテンリフト(Preloader Curtain Lift)を追加してください。スプラッシュスクリーン(splash screen)、イントロローダー(intro loader)とも呼ばれます。
全画面のイントロレイヤーをローディングバーが満ちるまで表示し、そのあと上へなめらかにスライドして消え、下からサイトがやわらかく落ち着いて現れるようにしてください。
再生は初回読み込み時だけにし、実際の読み込み時間より長くページを止めず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は省略してください。A
B
クリックしてください
Shared Axis (共有軸トランジション)
別名 Shared axis X/Y/Z
出ていくコンテンツと入ってくるコンテンツが、フェードしながら X・Y・Z いずれかの軸に沿って一緒に動き、空間的な関係を示します。
使いどころ
ステッパー、同階層の移動、ドリルダウン
[適用する場所]にシェアードアクシス(Shared Axis)のページトランジションを追加してください。共有軸トランジション、shared axis X/Y/Z とも呼ばれます。
進むときは、古いコンテンツが片側へ少しだけスライドして素早くフェードアウトし、新しいコンテンツが反対側からスライドしてすぐあとにフェードインするようにしてください。戻るときは方向を逆にします。
移動距離は方向がわかる程度に短くし、軸はナビゲーションに合わせてください。同階層は横、ステップは縦、掘り下げは奥行きです。BC
A
クリックしてください
Shared Element Transition (共有要素トランジション)
別名 Hero transition, View Transition shared element, view-transition-name morph
サムネイルなど対応する要素が、ページをまたいで位置とサイズを変えながら変形します。
使いどころ
サムネイルから詳細ページへ
[適用する場所]に共有要素トランジション(Shared Element Transition)を追加してください。ヒーロートランジション(hero transition)、view-transition-name morph とも呼ばれます。
次のページへ移るとき、サムネイルなど対応する要素がなめらかに移動・拡大して新しいページ上の位置に収まり、ほかのコンテンツはクロスフェードするようにしてください。戻るときは縮んで元に戻します。
両ページの対応する要素に共通のアイデンティティを与えて正しく対になるようにし、ブラウザーが変形できない場合は単純なクロスフェードにしてください。