HOME / EFFECTS / トランジション・画面遷移

CSS画面遷移アニメーション13種｜コピペ+AIプロンプト

画面が切り替わる一瞬は、閲覧者が「今どこにいるか」を見失いやすい場所です。切り替わりに繋がりを持たせると、迷いが減り、操作した実感が残ります。ここでは切り替えの演出を13種類集めました。ブラウザ標準の View Transitions API や @starting-style を使う新しい方法から、カーテン・ズーム・スライドといった古典的な表現まで揃っています。

トランジション・画面遷移 · 13 EFFECTS

No.010PAGE FADE TRANSITIONCSS No.020VIEW TRANSITION APICSS No.060SLIDE PANEL TRANSITIONCSSJS No.071CROSSFADE GALLERYCSSJS No.072CURTAIN REVEALCSSJS No.073ZOOM BLUR TRANSITIONCSSJS No.106FRAMER PAGE TRANSITIONCSSJSFRAMER No.118STARTING STYLE FADECSS No.127BLUR FADE INCSS No.167CIRCLE REVEAL THEME TOGGLE DARK MODECSSJS No.178FLIP LIST REORDER SHUFFLE ANIMATIONCSSJS No.179DIRECTION AWARE TABS SLIDECSSJS No.198INTERPOLATE SIZE HEIGHT AUTO TRANSITION DETAILS CONTENT ACCORDIONCSSJS

実装の勘所

遷移は短く。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プロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。

他のカテゴリを見る

テキストアニメーション 28 ホバーエフェクト 8 スクロールアニメーション 23 マイクロインタラクション 28 カードアニメーション 20 背景アニメーション 14 ボタンアニメーション 18 ローディングアニメーション 14 モーダル・ドロワー 15 SVGアニメーション 8 カーソルエフェクト 11

全199種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むなら カタログ一覧、 長文の解説を読むなら ガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装する へ。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 マイクロインタラクション ―UI/UXデザインの神が宿る細部 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスクPR

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

🎬 Adobe Creative Cloud — After Effects / Photoshop 業界標準ツール → 💻 SkillHacks — プログラミング・動画編集オンラインスクール → 🚀 デイトラ — Web制作スクール・実案件レベルまで習得 →

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。