CSS画面遷移アニメーション13種｜コピペ+AIプロンプト
画面が切り替わる一瞬は、閲覧者が「今どこにいるか」を見失いやすい場所です。切り替わりに繋がりを持たせると、迷いが減り、操作した実感が残ります。ここでは切り替えの演出を13種類集めました。ブラウザ標準の View Transitions API や @starting-style を使う新しい方法から、カーテン・ズーム・スライドといった古典的な表現まで揃っています。
トランジション・画面遷移 · 13 EFFECTS
実装の勘所
遷移は短く。200〜400msが基準
画面遷移の演出は毎回見るものです。1回だけなら心地よい長さでも、10回繰り返すと必ず邪魔になります。迷ったら短い方に倒してください。
display の切り替えには @starting-style が要る
display:none から現れる要素は、開始値を持てないためトランジションが起動しません。@starting-style と transition-behavior: allow-discrete をセットで使うと、CSSだけでフェードインできます。
戻る操作でも自然に見えるか確認する
進むときだけ考えて作ると、ブラウザバックで不自然な動きになることがあります。左から入るなら戻るときは右から、というように、方向に意味を持たせてください。
FAQ
Q. View Transitions API は何ができますか？
ページやDOMの状態が切り替わる前後のスナップショットをブラウザが取り、その間を自動的に補間してくれる仕組みです。同じ要素に同じ view-transition-name を付けておくと、位置やサイズが変わっても要素が移動したように繋がって見えます。従来はライブラリが必要だった表現が標準機能で実現できます。
Q. SPA でなくても画面遷移アニメーションは付けられますか？
付けられます。同一オリジン内のページ遷移であれば @view-transition { navigation: auto } の指定だけでクロスドキュメントの遷移アニメーションが有効になります。対応していないブラウザでは従来どおり瞬時に切り替わるだけで、実害はありません。
Q. コードは無料で使えますか？
はい。Motion Lab のコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。
他のカテゴリを見る
全199種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むなら カタログ一覧、 長文の解説を読むなら ガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装する へ。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスクPR
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
CREATOR TOOLS · スクール（PR）
※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。