CSSだけ！カーテンのように左右に開くページ遷移アニメーション

See the Pen カーテンのように左右に開くページ遷移アニメーション by チータツ (@cheese_fuji) on CodePen.

Rerunで再アニメーション↑

CSSの解説

コードを見る

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

HTML

<body></body>

CSS

/***カーテンのように開くアニメーション***/
body::before, body::after{
  content: "";
  position: fixed; /*固定表示*/
  top: 0;
  width: 50vw;
  height: 100vh;
  background: #940C04; /*劇のカーテン色*/
  animation: curtainOpen 1s forwards;
  animation-delay: 1s; /*遅延時間*/
  z-index: 999; /*最前面に*/
}
body::before{
  left: 0; /*左に開く*/
}
body::after{
  right: 0; /*右に開く*/
}

@keyframes curtainOpen{
  0%{
    width: 50%; /*閉じている状態*/
  }
  100%{ 
    width: 0; /*開く*/
    visibility: hidden; /*非表示に*/
  }
}

/***サンプル装飾用***/
body{
  padding: 1rem;
}

画面を2分割して左右それぞれをカバーする要素を用意。2つともにアニメーションで中心から画面端まで縮めることで、カーテンが開いたかのような動きが実現します。

@keyframesでアニメーションを作成
- 0%：幅width: 50vwで画面全体を覆う
- 100%：width: 0で画面端まで縮んで、visibility: hidden で非表示に
アニメーション用の疑似要素body::beforeとbody::afterを作成する
- position: fixedで固定表示
- width: 50vwとheight: 100vhで画面を左右半分ずつカバー
- top:0で画面に高さをぴったり合わせる
- z-index: 999を指定して、他の固定表示要素よりも上に表示する
- backgroundで色付け
- animationを指定（アニメーション名、時間、forwards）
- 好みで遅延時間animation-delayを設定
body::beforeは左に展開させたいのでleft: 0に
body::afterは右に展開させたいのでright: 0に