ページ遷移アニメーション CSSギャラリーとは、幕が開閉するカーテン演出・フェードやワイプなどの遷移演出・読み込み中に見せるローディング画面の3系統を、再生ボタンで実際に動かして試し、HTML+CSS+JSをワンクリックでコピーできる無料ツールです。外部ライブラリは不要で、アクセント色を自分のサイトに合わせてからコードを取得できます。
「ページを移動したときに一瞬だけ幕を挟みたい」「読み込み中の白い画面をどうにかしたい」——遷移演出は一瞬しか表示されないのに、コードを書いてページに貼るまで動きが確認できないという厄介さがあります。しかも幕が閉じる時間とページ移動のタイミングを合わせる必要があり、数値を少し変えては貼り直す作業になりがちです。
この記事では、CodeQuest.workが公開している無料ツール「ページ遷移アニメーション CSSギャラリー」の特徴と使い方を、実際の操作の流れに沿って解説します。カードをクリックすれば演出がその場で再生され、タイミングを合わせたJavaScriptまで含めてコードを取得できるツールです。
ページ遷移アニメーション CSSギャラリーとは
ページ遷移アニメーション CSSギャラリーは、ブラウザだけで完結する遷移演出の試用＆コード取得ツールです。基本の流れは「再生して試す → 選ぶ → コピペ」の3ステップだけ。カードをクリックすると演出が最初から再生され、気に入ったものはHTML・CSS・JSのセットをワンクリックでコピーできます。
このツールの要点は、演出とタイミングをセットで持ち帰れることです。遷移演出は「幕が閉じ切ってからページを移動する」必要があり、CSSの transition の時間とJavaScriptの待ち時間が一致していないと、移動が早すぎて演出が途中で切れたり、逆に幕が閉じたまま無駄に待たされたりします。ギャラリーが出力するコードでは、この待ち時間が各演出の実際の再生時間に合わせて埋め込まれています。
なお、収録されているのは「画面全体を覆う演出」です。要素単位で動かすアニメーションを探している場合は、姉妹ツールを解説したCSSアニメーションをコピペで使える無料ツールのほうが目的に合います。
このツールでできること
機能はシンプルに絞られています。登録やインストールは不要で、ページを開いた瞬間から使えます。
- クリックで再生：カードを押すと演出が最初から再生される。一瞬で終わる動きも何度でも見返せる
- カテゴリで絞り込み：カーテン・ページ遷移・ローディングの3分類をチップで切り替え
- まとめて再生：「表示中を順に再生」で、絞り込んだ演出を順番に流して比較できる
- HTML+CSS+JSをワンクリックコピー：待ち時間まで調整済みのコード一式を取得
- コードプレビュー：カードを選ぶとサイドバーに全コードを表示。貼る前に中身を確認できる
- 色のカスタマイズ：アクセント色・サブ色をカラーピッカーで変更すると、プレビューとコピーされるコードの両方に即反映
「表示中を順に再生」は、似た演出を見比べるときに便利です。遷移演出は単体で見ると良く見えても、並べると速度や重さの違いがはっきりします。なお、CodeQuest.workではこのほかにもCSS系の無料ツールを公開しており、全体像はCSSの装飾・アニメーションを作る無料ジェネレーターまとめで確認できます。
使い方は3ステップ
操作は難しくありません。ツールを開いてから実装に取りかかるまで、次の3ステップで完了します。
- カテゴリを決める：ページ移動のときに見せたいのか、読み込み中に見せたいのかで選ぶ場所が変わります。前者はカーテンまたはページ遷移、後者はローディングです。
- 再生して見比べる：気になるカードをクリックして再生します。「表示中を順に再生」を使うと、絞り込んだ候補を続けて確認できます。
- 色を合わせてコピーする：サイドバーでアクセント色を自分のサイトに合わせ、コピーボタンを押します。コードには変更後の色がそのまま入っています。
遷移演出は「かっこよさ」で選ぶと失敗しやすい要素です。同じ動きを毎回のページ移動で見ることになるため、10回見ても気にならない速さかどうかを基準に選ぶと、公開後に後悔しにくくなります。
収録演出の3カテゴリ
収録されている演出は、使うタイミングごとに3つのカテゴリへ整理されています。見た目が似ていても発火の条件が違うため、まずこの区別を押さえておくと選びやすくなります。
| カテゴリ | 種類数 | いつ動くか | 代表例 |
|---|---|---|---|
| カーテン | 20種 | ページを開いた直後に幕が開き、リンククリックで閉じる | 中央から左右に開く／縦ストライプが順に抜ける／円形に開く／ロールカーテンが巻き上がる |
| ページ遷移 | 10種 | 同上。幕というより画面全体の切り替え演出 | フェード／ぼかしが晴れて消える／色面が横切る／ブラインドが回って開く |
| ローディング | 12種 | 最初から表示されており、読み込み完了で消える | リングが回る／プログレスバーが伸びる／0→100%にカウント／スケルトンUI風 |
カーテン系：幕の開き方で印象を作る
最も種類が多いのがカーテン系です。画面いっぱいの幕を position: fixed で敷いておき、開いた状態を表す is-open が付いたら transform で外へ逃がす、という構成で統一されています。もっともシンプルな「中央から左右に開く」は次のようなコードです。
.pt-split-x {
position: fixed; inset: 0; z-index: 9999; display: flex;
pointer-events: auto;
}
.pt-split-x.is-open { pointer-events: none; }
.pt-split-x i {
flex: 1; background: #6366f1;
transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.pt-split-x.is-open i:nth-child(1) { transform: translateX(-100%); }
.pt-split-x.is-open i:nth-child(2) { transform: translateX(100%); }見落とされがちですが重要なのが pointer-events です。幕は画面の最前面にあるため、開いたあともそのままだとクリックを吸い取ってしまい、ページが操作できなくなります。開いた状態では none にして、下のコンテンツへ操作が通るようにしています。
幕の分割数や形を変えたバリエーションが揃っており、縦・横のストライプが順に抜けるもの、市松のタイルが消えるもの、円形に開くもの、波形やギザギザのふちを持つもの、ロールカーテンのように巻き上がるものなどから選べます。
ページ遷移系：控えめに切り替える
ページ遷移カテゴリは、幕という形を取らずに画面全体を切り替えるタイプです。単純なフェード、ズームアウト、ぼかしが晴れる、色面が横切る、といった演出が中心で、カーテン系より自己主張が控えめです。
回遊性の高いサイト——記事数の多いブログやドキュメントのように、1セッションで何ページも移動する場所では、こちらのカテゴリのほうが向いています。演出が軽いぶん、移動のたびに待たされる感覚が出にくいためです。
ローディング系：初期状態が「表示」
ローディングカテゴリだけは動きの前提が逆になります。カーテンや遷移演出が「閉じている状態から開く」のに対し、ローディングは最初から画面に表示されていて、読み込みが終わったら消えるのが初期状態です。付属するJavaScriptもこの1点だけを担当します。
// 読み込み完了でローディング画面を閉じる
window.addEventListener("load", () => {
document.querySelector(".ld-spinner").classList.add("is-done");
});収録されているのは、リングが回るスピナー、プログレスバー、3点が順に跳ねるドット、ロゴが脈打つもの、数字が0から100%へ進むカウンター、文字が1つずつ現れるもの、スケルトンUI風など12種類です。画面を覆わずページ上端に極細のバーだけを出すタイプもあり、これは読み込みを知らせつつコンテンツを隠したくない場合に使えます。
単体の実装を深く知りたい場合は、個別の解説記事もあります。円形スピナーはCSSだけで作る円形ローディングアニメーション、ロゴが描かれる表現はSVGロゴが描かれるローディングアニメーション、文字が点灯する表現はテキストが点灯するローディングアニメーションで扱っています。
アクセント色・サブ色のカスタマイズ
サイドバーには「アクセント色」と「サブ色」の2つのカラーピッカーがあります。アクセント色は幕やローディング画面の背景といった主役の色、サブ色は2色の面が続けて横切るパターンなど、2色使いの演出で使われる副色です。
遷移演出は画面の大部分をその色が占めるため、色選びの影響が他のUIパーツより大きいのが特徴です。ブランドカラーをそのまま全面に敷くと想像より強く出ることがあるので、実際に再生して面積込みで確認してから決めるのが確実です。色を変えるとプレビューとコピーされるコードの両方に即座に反映され、半透明の rgba() の値も連動して置き換わります。
コピーしたコードをサイトに組み込む方法
コピーされるのはCSS・HTML・JSの3点セットです。カテゴリによって組み込み方が変わるので、それぞれ見ていきます。
ローディング画面の場合
HTMLは body の先頭に置きます。読み込み中に表示するものなので、後ろのほうに書くと表示が遅れて意味が薄れます。CSSも同様に、遅延読み込みされるスタイルシートではなく、早い段階で適用される場所に置いてください。
JSは window の load イベントを待つだけなので、置き場所は問いません。なお load は画像を含むすべての読み込みが終わってから発火するため、画像の多いページでは待ち時間が長くなります。体感を優先するなら DOMContentLoaded に変えるか、一定時間で強制的に閉じる処理を足す方法があります。
リンククリック時の遷移演出の場合
カーテンとページ遷移カテゴリのJSは、読み込み直後に幕を開き、内部リンクのクリックを横取りして「幕を閉じてから移動する」という流れを作ります。
// 読み込み直後に幕を開き、内部リンクのクリックで幕を閉じてから遷移する
const veil = document.querySelector(".pt-split-x");
requestAnimationFrame(() => veil.classList.add("is-open"));
document.querySelectorAll('a[href^="/"]').forEach((a) => {
a.addEventListener("click", (e) => {
e.preventDefault();
veil.classList.remove("is-open");
setTimeout(() => (location.href = a.href), 600);
});
});末尾の 600 は、その演出の幕が閉じ切るまでのミリ秒です。CSSの transition の時間と対になっており、演出ごとに違う値が入ります。CSSの速度を後から変えたときは、この数値も一緒に直す必要があります。ここがずれると、幕が閉じ切る前にページが切り替わったり、閉じたまま無駄に待たされたりします。
対象を a[href^="/"] に絞っているのは、外部リンクや # のページ内リンクまで横取りしないためです。実サイトに入れるときは、別タブで開くリンクやダウンロードリンクも除外対象になっていないか確認しておくと安全です。
View Transitions API との使い分け
ページ遷移の演出には、ブラウザ標準の View Transitions API を使う方法もあります。MDNのView Transition APIの解説によると、異なるDOM状態のあいだをアニメーションで繋ぐための仕組みで、複数ページ間の遷移にも対応しています。
両者は競合するものではなく、担当領域が違います。
| このギャラリーの方式 | View Transitions API | |
|---|---|---|
| やっていること | 幕を被せてから移動する | 前後のページのスナップショットを繋ぐ |
| 得意な表現 | 幕・カーテン・ローディング画面 | 要素が位置を保ったまま移り変わる表現 |
| 対応していないブラウザでは | そのまま同じ演出が動く | 演出なしで普通に遷移する |
| 導入の手数 | コピペで完結 | CSSとページ側の指定が必要 |
「画面を一度覆ってから切り替える」タイプの演出を手早く入れたいなら、このギャラリーの方式が向いています。一方で「一覧の画像が詳細ページの位置へ滑らかに移動する」ような、要素の連続性を見せる表現はView Transitions APIの領分です。目的の演出がどちらに当てはまるかで選んでください。
こんな場面で使える
実務では次のような場面で時間を節約できます。
- ブランドサイト・ポートフォリオの制作：ページ数が少なく1ページの印象が重いサイトでは、カーテン演出が世界観づくりに効きます
- 読み込みが重いページの体感改善：画像やフォントが多いトップページに、白い画面の代わりとなるローディングを置けます
- デザイン提案の比較材料：静止画では伝わらない「間の取り方」を、実際に再生しながら合意形成に使えます
- イベント・キャンペーンページ：期間限定のページで、開幕の演出として使うと導入の演出コストを抑えられます
- 学習用のサンプル収集：
clip-pathやtransformで幕をどう表現するか、実装を読み比べられます
より重量級の演出を作り込みたい場合は、Three.js×GSAPで作る画面トランジションアニメーションのようにライブラリを使う選択肢もあります。まずCSSだけで足りるかをこのギャラリーで見極めてから、必要に応じて段を上げるのが効率的です。
使うときにつまずきやすいポイント
遷移演出は画面全体を覆うぶん、失敗したときの影響も大きい要素です。実装前に知っておきたい注意点をまとめます。
演出のぶんだけ体感速度が落ちる
幕を閉じてから移動する方式は、構造上演出の時間がそのまま待ち時間として上乗せされます。0.6秒の演出なら、ページ移動は毎回0.6秒遅くなる計算です。回遊の多いサイトでは、この積み重ねが体験を損なうことがあります。演出を入れる範囲をトップページの初回表示だけに限定する、あるいは短い演出を選ぶといった判断が必要です。
JSが動かないと画面が塞がったままになる
カーテン系は「幕が閉じている」が初期状態のため、何らかの理由でJavaScriptが実行されないと、幕が閉じたままコンテンツが見えなくなります。スクリプトの読み込み失敗やエラーで停止した場合が該当します。心配な場合は、CSS側の初期状態を「開いている」にしてJSで一度閉じる作りに変えるか、一定時間後に強制的に開く保険を入れておくと安全です。ローディング系も同様に、load が発火しない状況に備えてタイムアウトを用意しておくと堅くなります。
動きを減らしたいユーザーへの配慮
画面全体が動く演出は、前庭障害のあるユーザーや、動きに酔いやすいユーザーにとって負担になりやすいものです。OSの「視差効果を減らす」設定を検出する prefers-reduced-motion のメディアクエリで、transition の時間を極端に短くする指定を足しておくと配慮になります。この場合、JS側の待ち時間も合わせて短くしないと、演出だけ一瞬で終わって待ち時間が残る形になる点に注意してください。
よくある質問
Q. 外部ライブラリは必要ですか？
いいえ。GSAPなどのアニメーションライブラリは不要です。動きはすべてCSSで実装されており、JavaScriptは幕の開閉やローディングの終了を切り替える数行だけが付属します。
Q. カーテンとローディングはどう違いますか？
発火のタイミングが逆です。カーテンとページ遷移は「閉じている状態」から始まり、ページを開くと開き、リンクをクリックすると再び閉じてから移動します。ローディングは「表示されている状態」から始まり、読み込みが終わると消えます。ページ移動を見せたいならカーテン、読み込み待ちを埋めたいならローディングを選んでください。
Q. 演出の速度は変えられますか？
はい。CSSの transition の秒数を書き換えれば変更できます。ただしカーテン・ページ遷移カテゴリでは、JavaScript側の setTimeout に幕が閉じ切るまでのミリ秒が入っているため、CSSだけ変えると移動のタイミングがずれます。両方をセットで直してください。
Q. 色は自分のサイトに合わせて変えられますか？
はい。サイドバーのカラーピッカーでアクセント色とサブ色を変更すると、一覧のプレビューとコピーされるコードの両方に即時反映されます。遷移演出は画面を大きく占めるため、実際に再生して面積込みで確認してから決めるのがおすすめです。
Q. 個別のローディング実装記事とはどう使い分けますか？
このギャラリーは複数の演出を並べて比較し、選んでコピペするためのツールです。特定の1種類について、どう組み立てられているかを順を追って理解したい場合は、個別の実装解説記事のほうが向いています。方向性を決めるのがギャラリー、作り込むのが個別記事という使い分けです。
Q. 商用サイトでも無料で使えますか？
はい。ツールの利用もコードの使用も無料で、会員登録は不要です。生成されるのは一般的なCSSとHTMLなので、商用サイトを含めて自由に組み込めます。
まとめ
ページ遷移アニメーション CSSギャラリーは、カーテン・遷移演出・ローディング画面を実際に再生しながら選び、色を合わせて、HTML+CSS+JSをワンクリックでコピーできる無料ツールです。CSSの速度とJavaScriptの待ち時間があらかじめ揃えられているため、タイミング合わせの試行錯誤を省けます。
遷移演出は、入れると一気にサイトの格が上がる一方、やりすぎると毎回の移動が煩わしくなる諸刃の要素でもあります。まずは一覧を順に再生して、自分のサイトの回遊のされ方に合う「間」を探してみてください。ヘッダーの開閉メニューまで含めてモーションを揃えたい場合は、ハンバーガーメニューのCSSをコピペで使える無料ツールと組み合わせると、サイト全体のトーンが統一できます。