CSSで作る！シャッターのように背景が動くページ遷移アニメーション

See the Pen 画面遷移時のシャッターアップアニメーション by チータツ (@cheese_fuji) on CodePen.

Rerunをクリックで再度アニメーション↑

上に開くようなシャッターアップのアニメーションです。（カメラのシャッターではありません）

CSSの解説

コードを見る

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

HTML

変更の必要なし
bodyに疑似要素を作りたくない場合のみ、アニメーション用のdiv要素などを作成。

CSS

/***アニメーション用の疑似要素***/
body::after{
  content: "";
  position: fixed;/*固定表示*/
  top:0;
  left: 0;
  width: 100vw;
  height: 100px;
  z-index: 999; /*他のスタッキングコンテキストとかち合った時用*/
  background: #FDCBB5; /*シャッターの色*/
  animation: min-anim .5s forwards; /*アニメーション付与*/
  animation-delay: 1s; /*好みで遅延*/
  transform-origin: top; /*変化の起点*/
}
/*背景が上に開くアニメーション*/
@keyframes min-anim{
  0% {
    transform: scaleY(1);/*画面全体を覆う*/
  }
  100% {
    transform: scaleY(0);/*高さ0*/
  }
}

基本的な仕組みは単純。画面と同じサイズのマスクを用意して、transform: scale()で縮小させるだけです。

@keyframesでアニメーションを作成
- 0%で高さ最大scaleY(1)
- 100%で縮んで消えるscaleY(0)
画面を覆うための疑似要素body:afterを作成する
- position: fixedで固定表示
- width: 100vwとheight: 100vhで画面と同じサイズにする
- left: 0 とtop:0で画面にぴったり合わせる
- z-index: 999を指定して、他の固定表示要素よりも上に表示する
- backgroundで色付け
- animationを指定（時間、アニメーション名、forwards）
- 好みで遅延時間animation-delayを設定
- transform-origin: topで変化の始点を上に設定