.zoom-fade {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}

.zoom-fade__item {
  object-fit: cover;
}

/*
ズーム（ズームイン）させるためのアニメーション
コメントアウト部分を入れ替えれば、ズームアウトになります。

拡大率（scale()）はお好みで！
*/
.add-animation {
  /* アニメーション名 アニメーションにかかる時間 アニメーションの実行前後の状態 */
  /* zoom-fade 10秒 [実行前]最初のキーフレーム（0%） → [実行後]最後のキーフレーム（100%） */
  animation: zoom-fade 10s both;
}

@keyframes zoom-fade {

  0% {
    /*transform: scale(1.05);*/
    transform: scale(1);
  }

  100% {
    /*transform: scale(1);*/
    transform: scale(1.05);
  }

}