二段階で背景がスライドするページ遷移

See the Pen 背景が2段階で変わるページ遷移アニメーション by チータツ (@cheese_fuji) on CodePen.

Rerunで再アニメーション↑

CSSの解説

コードを見る

余計な装飾を省いています。

HTML

<body>
</body>

CSS

/***背景共通***/
body::before, body::after{
  content: "";
  position: fixed; /*画面に固定表示*/
  top: 0;
  left: 0;
  width: 100vw; /*画面幅*/
  height: 100vh; /*画面の高さ*/
  transform-origin: right; /*動く向き*/
}

/***前面の背景***/
body::before{
  background: #a4d5bd; /*濃い緑*/
  z-index: 1000; /*前面*/
  animation: right-move 0.8s forwards;
  animation-delay: 1s;
}

/***背面の背景***/
body::after{
  background: #bee0ce; /*薄い緑*/
  z-index: 999; /*背面*/
  animation: right-move 1.2s forwards; 
  animation-delay: 2s; /*上の背景が動き終わった後まで遅延*/
}

/***背景が動くアニメーション***/
@keyframes right-move{
  0%{
    transform: scaleX(1); /*MAX幅*/
  }
  100% {
    transform: scaleX(0); /*幅0*/
    visibility: hidden; /*非表示に*/
  }
}

アニメーションさせる対象が2つになっただけで、基本的な仕組みはシャッターアニメーションと同じです。

サンプルでは疑似要素body::before, body::afterの2つを使用しています。bodyの疑似要素を使いたくない人は、div要素などを代わりに作成してCSSを適用させてください。

画面を覆う背景を2つ作成する
- position: fixedで固定表示
- width: 100vwとheight: 100vhで画面サイズに合わせる
- transform-originでアニメーションの向きを決める（サンプルは左→右）
前面の背景の調整
- z-indexを高い数値にして上に重ねる
- animationを指定（アニメーション名、時間、forwards）
- animation-delayでアニメーション開始の遅延時間を設定
背面の背景を調整
- z-indexを前面の背景より1つ小さい値に
- animationを指定（時間を少し変えてみるといい感じかも？）
- animation-delayを前面背景のアニメーション後に調整（前面の遅延時間＋前面のアニメーション時間より高い数値に）
@keyframesで背景が動くアニメーションを作成
- 0%：transform: scaleX(1) で幅は最大値
- 100%：transform: scaleX(0) で幅を0に、visibility: hiddenで非表示に^※

幅や座標を間違えない限りはvisibility :hiddenがなくてもちゃんと画面から消えますが、モニター外に存在するというのが気持ち悪いので一応書いています。

9行目 transform: origin をleftにすれば、左へ流れるアニメーションに変わります。

応用CSS

縦にスライドする

先ほどのサンプルとは違い、縦方向に背景がスライドします。transform-origin: topで起点を上に変更し、scaleX()からscaleY()によるアニメーションへと変更しています。

下方向にスライドさせたい場合は、transform-origin: bottomへと変更してください。

See the Pen 2段階で背景がスライドするオープニングアニメーション(縦) by チータツ (@cheese_fuji) on CodePen.