やってみよう一覧の行を押して次の画面へ進み、左上の「‹ 戻る」で戻ってみてください
アニメーション・演出メジャー（よく見る）
画面切り替えアニメーション
Page Transition / Screen Transition
次の画面へ進むと右から新しい画面が重なるように入ってきて、戻ると右へ抜けていく。
別名画面遷移アニメーションプッシュ遷移スライドインナビゲーションアニメーション
どこで使われている？
- よく見かける場所
- ほぼすべてのスマホアプリ（設定、メール、一覧から詳細へ）
- 使うとよい場面
- 一覧から詳細へ「奥に進んだ」ことを伝えたいとき
- 避けたい場面
- 同じ階層の切り替え（タブなら横スライドより切り替えにする）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「画面切り替えアニメーション（Page Transition / Screen Transition）」を実装してください。 動き：次の画面へ進むときは、新しい画面を右から左へスライドさせて重ね、前の画面は少し左へずらしながら暗くする。戻るときは逆の動きにする。画面の左端からの右スワイプでも戻れるようにする。 使う部品：View Transitions API
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | View Transitions API |
|---|---|
| iPhoneアプリなら | NavigationStack（標準でスライドする） |
| Androidアプリなら | Navigation Compose の enterTransition / exitTransition |
| Flutterなら | MaterialPageRoute（自由にするなら PageRouteBuilder） |
| React Nativeなら | React Navigation の animation 設定 |