BLOG

動きをつけてワンランクアップ!ページ遷移アニメーションまとめ【デモ付き】

更新日:2022/12/02


ページ遷移アニメーションとは、ホームページを訪れた時やページを移動した時などの、ページが切り替わるタイミングに付けるアニメーション演出のことです。
移動という単調な動きにスライドやフェードなどのアクセントをつけることで、Webサイトならではのリッチな表現を楽しむことができます。

例えば、以下のようなものを作ることが出来ます。
【デモ】上から下へ背景色が移動する

Webサイトを作成していく中で、「もう少し動きが欲しいな…」と感じることがありませんか?
スクロールしたら要素がふわっと表示されたり、背景に図形がふわふわと舞っているような動きがありますが、デザインによっては実装が難しい場合があります。
例えば、「ニューモーフィズム」で作成されているデザインのWebサイトに動きを付けてしまうとその良さが消えてしまうことがありますよね。

しかし、ページ遷移ならばデザインに左右されることなく、実装することが出来ます。またページ遷移にアニメーションを付けることでWebサイトのクオリティを上げることが出来ます。
本記事では初級・中級・上級編と三段階の難易度に分けてデモをご紹介していきますので、ぜひご覧ください。

【準備】HTML・CSS・jQueryを用意

まず、基本となるHTML・CSS・jQueryを用意します。
今回は、初級・中級・上級と三段階に分けてご紹介するので、違いが分かりやすいように色分けをしています。

HTML

トップページ風に調整します。
.animation-bgはページ遷移に使用する要素です。

ソースの表示

CSS

※必要な部分だけ記載しています。

ソースの表示

@keyframes PageAnime-content の部分でフェードインのアニメーションを作成しています。
初期状態では .content を opacity: 0 にしておき、ページ読み込みが完了して body に .appear というクラス名がついたら、 PageAnime-content を適用させて opacity: 1 にする、という形です。

jQuery

ソースの表示

ページが読み込まれたら($(window).on(‘load’)、body に .appear というクラス名を追加します。
それをトリガーとしてアニメーションが走る形になります。

これで準備完了です。
ここまでで以下のようになります。
「PageAnime-content」のフェードインアニメーションだけが適用されている状態です。
【デモ】ページ遷移アニメーション下準備
次からページ遷移アニメーションを紹介していきます。

【初級編】シンプルなページ遷移アニメーション

まず初めに、シンプルなページ遷移アニメーションからご紹介いたします。

フェードイン・フェードアウト

ふわっと消えたり、出てきたりするページ遷移アニメーションです。

「.fade」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。
【デモ】フェードアウト・イン

キーフレームはこちらです。

100%になるにつれて透明度が0になるように、opacityを指定します。
透明度を下げて非表示にしているだけなのでdisplay: noneを追加しないとクリックなどが効かなくなってしまうので、追加します。

背景色が動く

背景色が動くページ遷移アニメーションはスタンダードな形と言えますね。
本記事では動く方向別に全8種類のデモをご用意しました。

  • 上から下へ・下から上へ

  • 左から右へ・右から左へ

  • 左上から右下へ・右下から左上へ

  • 右上から左下へ・左下から右上へ

HTML

基本的な記述は同じです。
今回は、分かりやすいようにそれぞれにクラスをつけていますが、実際に使うときは、環境にあった書き方で大丈夫です。

ソースの表示

CSS

画面いっぱいにanimation-bgを広げ、背景色を指定します。
あとで個別に指定する animation-name を除き、それ以外の共通のアニメーションを指定しておきます。
今回は、アニメーションが完了するまでに1秒かかり、最後のキーフレーム(100%)のスタイルが適用される形です。
※animation-durationの時間は環境に合わせて適宜変更してください。

ソースの表示

上から下へ・下から上へ

まず、デモはこちらになります。
【デモ】上から下へ
【デモ】下から上へ
それぞれのキーフレームはこちらです。
※追記部分だけ記載しています。

上から下へ

「.ttb(top to bottom)」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。

使用するプロパティは以下です。

transform-origin
要素の中心位置(アニメーションの開始位置)を指定します。
left・rightでx座標、top・bottomでy座標の指定です。
transform
要素をどのように変形するのかを指定します。
今回「背景色が動く」で使用するのは、translate・scale・skewです。

今回は上から下に向かって動くので、位置は0%の時はtopと設定し、100%の時はbottomと設定します。
動く方向は縦(y座標)なので、scaleYを指定して上から下に向かって変形するように0%と100%の時はscaleY(0)を指定します。
50%にtransform:scaleY(1)と指定して、背景色が動いて消えるような挙動にします。
50%の時に背景色を表示させて、50.001%で位置をbottomに切り替え、100%になるにつれて消えていくという動きです。

下から上へ

「.btt(bottom to top)」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。

こちらは「上から下へ」の方向を逆にしただけです。
「下から上へ」なのでtransform-originの設定を逆にするだけです。
0%・50%の時はbottomと設定し、50.001%・100%の時はtopと設定します。

左から右へ・右から左へ

まず、デモはこちらになります。
【デモ】左から右へ
【デモ】右から左へ
それぞれのキーフレームはこちらです。
※追記部分だけ記載しています。

左から右へ

「.ltr(left to right)」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。

先程紹介した「上から下へ・下から上へ」は縦の動きでしたが、こちらは「左から右へ」なので動く方向は横(x座標)です。
transform-originでは、leftもしくはrightを指定し、transformではscaleXを指定します。
左から開始するので、transform-originは、0%の時はleftを指定し、100%の時はrightを指定します。
横移動なので、transformは0%の時はscaleX(0)を指定し、100%の時はscaleX(1)を指定します。

右から左へ

「.rtl(right to left)」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。

「左から右へ」の開始位置を逆にしただけです。
「右から左へ」なので、transform-originの設定を0%・50%の時はrightと設定し、50.001%・100%の時はleftと設定します。

左上から右下へ・右下から左上へ

まず、デモはこちらになります。
左上から右下へ
右下から左上へ
それぞれのキーフレームはこちらです。
※追記部分だけ記載しています。

左上から右下へ

「.top」と「.ltr」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。

ここから、開始位置が少しだけ特殊です。
今まで上下左右、一か所から始まっていましたが、今回は上下左右からではないのでtransform-originに2つ設定する必要があります。
「左上から右下へ」なので、左(left)上(top)を設定する必要があります。ですが、今回は片側に余白が生まれないように上下は中央揃え(center)にします。

またここまで紹介した上下左右からの動きは、要素の高さを広げたり、縮めたりして表示していましたが、斜めの動きでは同じような書き方で対応することができません。そのため、今回は要素のサイズは変更せずに、画面外から要素を動かし再び画面外に消える、という動きになっています。

また、今回からscaleとskewを使用します。
animation-bgは画面幅いっぱいに広げて表示しているので、形が垂直・水平になっています。なので、skewで変形させて斜めになるように指定します。
そのままの大きさだと余白が生まれてしまうので、全体を覆えるようにscaleで拡大します。

translateXを使って要素全体が画面外→画面内→画面外となるように指定して完成です。
0%でtranslateX(-300%)を指定しているのは、画面外に表示させるためです。

右下から左上へ

「.bottom」と「.rtl」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。

基本的に「左上から右下へ」と同じ記述です。
違う点は、transform-originの左右の開始位置がleftからrightに変更になったことと、0%と100%の時のtranslateXの数値の+-が逆になったことです。

右上から左下へ・左下から右上へ

まず、デモはこちらになります。
右上から左下へ
左下から右上へ

それぞれのキーフレームはこちらです。
※追記部分だけ記載しています。

右上から左下へ

「.top」と「.rtl」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。

「右下から左上へ」のコードとほぼ同じです。違いはskewXの数値にマイナスを追加した点です。

左下から右上へ

「.bottom」と「.ltr」をbodyに追加し、それぞれの「.animation-bg」にアニメーションを設定します。

「左上から右下へ」のコードとほぼ同じです。違いはskewXの数値にマイナスを追加した点です。

背景色が拡大縮小

上下左右に動かすだけではなく、拡大縮小もするページ遷移アニメーションになります。

中央に向かって円形で縮小

背景色が中央に向かって円形に縮小していくページ遷移アニメーションです。
「.circle」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。
【デモ】中央に向かって円形で縮小

キーフレームはこちらです。

同じ比率で縮小するために、こちらではwidthとheightの数値を指定します。transformのscaleで画面全体に表示されるようにします。
中央に向かって消えていくために、要素を中央に配置するようにtopとleftをします。
このままだと四角のまま縮小されてしまうので、border-radiusをかけて要素を円形にします。

アニメーションでscaleを100から0にするだけで完成です。

ひし形で背景色を抜き、拡大

ひし形で背景色を抜き、ひし形を拡大してページを表示するページ遷移アニメーションです。
「.rhombus」をbodyに追加しますが、こちらでは「.animation-bg」は使用しません。
まず、デモはこちらになります。
【デモ】ひし形で背景色を抜き、拡大

CSSは以下になります。
※追記部分だけ記載しています。

CSS

clip-pathを使って、画面全体をひし形にくり抜きます。

clip-path
要素のどの部分を表示するかを設定するクリッピング領域を作るCSSプロパティ

polygonの点の取り方は以下の画像のようになっています。
上⇒右⇒下⇒左の順で、各頂点の位置を指定しています。
50%は中央の座標を指し示し、そこから各頂点の位置に向かって、x軸・y軸を(--size: 12vh)分、ずらしています。

ひし形のサイズを変えたい場合は、--sizeの数値を変更することで変えることが出来ます。

また、.rhombus自体をひし形にくり抜いてアニメーションを行っているので、そのままだとアニメーション終了後に背景色が青色のままになってしまいます。そのため、疑似要素で白背景を追加しています。

jQueryは以下になります。
※追記部分だけ記載しています。

jQuery

ひし形が拡大され終わるタイミングで「.is-hidden」を追加します。
これでひし形にくり抜く、ページ遷移アニメーションの完成です。

グラデーションで消えていく

グラデーションで消えていくページ遷移アニメーションです。
「.gradation」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。

【デモ】グラデーションがかかる

それぞれのキーフレームはこちらです。
※追記部分だけ記載しています。

CSS

jQuery

linear-gradientには、transitionが効かないのでbackground-positionを使ってグラデーションが徐々に消えていく動作を実装します。
CSSだけだと上の方にグラデーションが残ったままになってしまうので、jQueryにfadeOutの記述を追加します。
アニメーションが終わるタイミングで.animation-bgをフェードアウトすることによって自然にグラデーションが消えていくような動きになります。

【中級編】ワンポイント加えておしゃれなページ遷移アニメーション

少しだけレベルアップして、ワンポイントを足したページ遷移アニメーションです。
初級編は、「.animation-bg」だけを使用していましたが、中級編からは少しHTMLに要素を追加します。

カーテンのようなページ遷移アニメーション

背景色が中央から2つに分かれて、カーテンが開いていくようなページ遷移アニメーションです。

「.curtain」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。
【デモ】カーテンのようなページ遷移アニメーション

HTML

「.animation-bg」、「.animation-bg02」のアニメーションに使用する要素を2つ用意します。

CSS

キーフレームはこちらです。

ソースの表示

今回、カーテンが開くように背景色が左右に分割するので、左側と右側、それぞれのアニメーションが必要です。
まず、bodyに「.appear」が追加されたら、アニメーション用要素を表示させます。

アニメーションと要素の表示位置以外は、左右同じ内容なので合わせて指定します。
アニメーションの内容は、「左から右へ・右から左へ」と同じです。

順番に閉じるページ遷移アニメーション

背景色が分割し順番に閉じていくようなページ遷移アニメーションです。

「.move-order」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。
【デモ】順番に閉じるページ遷移アニメーション

キーフレームはこちらです。
今回は10個に分割するので指定数が多くなります。

HTML

「animation-bg-element」は、今回動かす要素です。
個数は実装する環境に合わせて適宜変えてください。

CSS

ソースの表示

widthをcalc(100% / 10)とし、画面内にすべて収まるように一つ当たりの横幅を決めます。

左から順番に閉じていく動きを表現するには、「animation-delay」の数値をそれぞれで変更します。
今回は0.1sずつアニメーションが走るまでの時間に差を付けました。

translateYを指定して、下に向かって画面幅から見えなくなる位置に移動させて完成です。

4つに色を分割するページ遷移アニメーション

背景色を4つに分割しバラバラな方向に閉じてページを表示するページ遷移アニメーションです。

「.four-color」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。

【デモ】4つに色を分割するページ遷移アニメーション

キーフレームはこちらです。
今回は4つそれぞれ別方向にアニメーションが走るので、キーフレームも4つになります。

HTML

CSS

ソースの表示

左上・右上・左下・右下と画面を4つに分割して、配置します。
動きとしては、全体的に反時計回りに消えるような動きを実装します。
キーフレームで指定している内容は、「背景色が動く」で紹介した内容と同じなります。

wavify.jsを使ってゆらゆら揺れる波のページ遷移アニメーション

wavify.jsは、jQueryのプラグインです。
波がゆらゆらと揺れるような動きを実装することが出来ます。

「.motif」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。
【デモ】wavify.jsを使ってゆらゆら揺れる波のページ遷移アニメーション

キーフレームはこちらです。

HTML

pathを使って波を表現します。
今回は、奥行きがあるような波にしたいので3つのpathを使います。それぞれの色は水色・青緑色・白の三色にしました。
この波の個数は、実装する環境に適宜合わせてください。

CSS

CSSの記載はこれだけです。
波の表示される範囲を画面いっぱいにします。

jQuery

ソースの表示

wavifyで指定しているプロパティはそれぞれ以下を意味しています。

プロパティ 説明 初期値
height 波の高さ 200
bones 波の区切りの数 3
amplitude 波の山と谷の垂直距離 100
color 波の色 rgba(255,255,255, 0.20)
speed 波の動くスピード 0.15

【height】
pathの高さを指定します。数値が低ければ低いほど、要素の高さが高いので初期は1000を指定して、高さを無くし画面外から始まるような動きにします。

【bones】
波の数を変えます。数値が2など低ければ緩やかな波になり、数値が高ければその分細かく波打ちます。

【amplitude】
波の高さを指定します。初期値より低ければ波の高さは低く、数値が高ければ波の高さも高くなります。

【color】
波の色です。今回は不透明度を指定するために、rgbaで書きましたが#ffffffなどの書き方でもきちんと指定されます。ただ、グラデーションは指定出来ないので注意が必要です。

【speed】
波の動くスピードを指定できます。初期値に近いほど、滑らかに動きます。

今回は、下から上に向かって徐々に波が満ちていくような動きにするのでsetTimeoutを使ってその動きを実装します。
setTimeoutに合わせて、heightの数値を変更します。
setTimeoutが1900の時、heightをminus指定しているのは画面上部まで波が満ちさせるためです。マイナスの数値でないと余白がでてしまうのでマイナスを指定します。

またsetTimeoutの経過時間の間隔を一定にしていないのは、波っぽさを出すためです。一定の間隔で満ちるより、ばらばらに満ちていく方が実際の波に近いような気がするのでここでは間隔をバラバラにしています。
ここの時間などは、実装する環境に合わせて適宜変更してください。

animsition.jsを使って遷移アニメーション

animsition.jsは、ページ遷移用のシンプルな動きが簡単に実装出来るjQueryのプラグインです。

animsition.jsは今まで紹介した方法と使い方が異なります。
寧ろ他と比べて、公式サイトにソースが公開されているので簡単に実装することが出来ます。
今回は、「ズーム小」の動きを実装します。

まず、デモはこちらになります。
【デモ】animsition.jsを使ってページ遷移アニメーション

ダウンロード

まず、公式サイトから必要なファイルをダウンロードします。
アニメーション CSS アニメーション ページ遷移用のシンプルで使いやすい JQUERY プラグイン。
ダウンロードファイルの中にある以下のファイルをそれぞれ対応するファイルに入れます。

  • animsition-master > dist > css > animsition.min.css

  • animsition-master > dist > js > animsition.min.js

HTML

ソースの表示

こちらでは、「.animation-bg」の要素を使用しません。
その代わりに、bodyの開始タグに以下の内容を加えます。
こちらは公式サイトにある「各ページに異なるアニメーションを使用する場合」の書き方です。