[Rails][HTML,CSS] JQueryを使わず背景画像をアニメーションにする

実装したいこと

このように背景画像がフェードイン、アウトを繰り返すようにCSSを設定していきます。

HTML

html

<div class="box">
  <div class="bgImg src1"></div>
  <div class="bgImg src2"></div>
  <div class="bgImg src3"></div>
  <div class="bgImg src4"></div>
</div>

使用する画像の数だけ子要素を用意しましょう。
私の場合４枚の画像を使うため、今回は、上記のように４枚分子要素を用意します。

CSS

css

.box {
  position   : relative;
  width  : 100vw;
  height     : 100vh;
}

.box .bgImg {
  position   : absolute;
  width  : 100%;
  height     : 100%;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  background-size: cover;
  animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
  background-image : url('画像のパス');   /* 背景の画像を指定 */
}
.box .src2 {
  background-image : url('画像のパス');   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.box .src3 {
  background-image : url('画像のパス');   /* 背景の画像を指定 */
  animation-delay  : 10s;
}
.box .src4 {
  background-image : url('画像のパス');   /* 背景の画像を指定 */
  animation-delay  : 15s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}

以上の記述で完了です。

自分なりに手を加えたい方へ

自分好みにアレンジを加えたい方がいらっしゃるかもしれませんので、どこを変更すれば変えられるかを、２つほど例を上げておきます。

1.画像枚数を変えたい

画像を４枚ではなく６枚にしたいときの変更場所です。

animation  : bgAnime 20s infinite;
             ↓
animation  : bgAnime 30s infinite;

.box .src1 {
  background-image : url('画像のパス');   /* 背景の画像を指定 */
}
.box .src2 {
  background-image : url('画像のパス');   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.box .src3 {
  background-image : url('画像のパス');   /* 背景の画像を指定 */
  animation-delay  : 10s;
}
.box .src4 {
  background-image : url('画像のパス');   /* 背景の画像を指定 */
  animation-delay  : 15s;

/*追記*/

}
.box .src5 {
  background-image : url('画像のパス');   /* 背景の画像を指定 */
  animation-delay  : 20s;
}
.box .src6 {
  background-image : url('画像のパス');   /* 背景の画像を指定 */
  animation-delay  : 25s;
}

主に秒数の変更と画像を追加するだけですね。

2.画像をゆっくり変化させたい

@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; } 　←こちらを消去する
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}

解説しますと、今回の場合、この０％〜１００％という数字は
「20秒間における内訳」を表したものです。
また、opacityは、透明度を指定するものですので、0だと透明、１で完全不透明となります。

今回は４枚の画像のアニメーションを２０秒で流れるよう設定しておりますので、１枚あたり５秒間。つまり、２０秒の２５％部分である約５秒間を境にフェードインとフェードアウトを設定すべきです。

そして２枚目以降にanimation-delayを５秒毎にかけているので、構造としては、１枚の画像が完全不透明となっている間は、他の画像は全て透明となっているため、アニメーションが出来上がっています。

ですので、５％部分を取り除くことで、０％から２５％、つまり０秒から５秒にかけて透明から不完全透明にさせることができ、ゆっくりとしたアニメーションを作ることが可能となっております。

まとめ

視覚的に動的なブラウザの方が、現代的な印象を受けやすいと思いますので、ぜひ導入をお勧めします。
自分好みに手を加えてみてください。
ご覧いただきありがとうございました。