CSSで背景画像をズームして切り替える

CSSで背景画像をズーム・遠近で表示後に画像を切り替えるサンプルを掲載しています。
当ページでは、背景画像の動き（遠近/近遠）やズームサイズ・表示切り替えの速度などを自由に指定しながら実際のデザインを確認することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

<div class="box">
  <div class="bgImg src1"></div>
  <div class="bgImg src2"></div>
  <div class="bgImg src3"></div>
  <div class="bgImg src4"></div>
  <div class="boxString">背景が<br>切り替わる</div>
</div>

<style type="text/css">
/* --- 背景が上下左右に動くのBOX定義 ------------------------ */
.box {
  position   : relative;
  max-width  : 500px;                   /* 背景の大きさに変更 */
  height     : 200px;
  margin     : auto;
  background : #ffffff;
}
/* --- 背景が上下左右に動くの背景定義 ----------------------- */
.box::before {
  display    : block;
  content    : "";
  position   : absolute;
  top        : 0;
  right      : 0;
  bottom     : 0;
  left       : 0;
  background-image : url(./image.png);  /* 使用する画像を指定 */
  animation  : bgAnime 15s linear infinite;
}
@keyframes bgAnime {
   0% { background-position: 0 0 }
                /* 使用する画像幅と画像高さのpxに変更ください */
 100% { background-position: 500px -666px }
}
/* --- 前面の文字定義（サンプルのため変更してください） ----- */
.boxString{
  position   : absolute;
  display    : inline-block;
  background : rgba(0, 127, 255, 0.7);
  top        : 50%;
  left       : 50%;
  padding    : 20px;
  color      : #fff;
  transform  : translate(-50%,-50%);
}
</style>