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

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

トランジション・画面遷移 · 9 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

実装の勘所

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

他のカテゴリを見る

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

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

BOOKS · PR · AMAZON

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

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