구현하고 싶은 것

이와 같이 배경 이미지가 페이드 인, 아웃을 반복하도록 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>

사용할 이미지 수만큼 자식 요소를 준비합시다.
제 경우 4장의 이미지를 사용하기 때문에 이번에는 위와 같이 4장 분자 요소를 준비합니다.

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; }
}

이상의 기술로 완료입니다.

나름대로 손을 넣고 싶은 분에게

자신 취향에 어레인지를 추가하고 싶은 분이 계실지도 모르기 때문에, 어디를 변경하면 바꿀 수 있을까를, 2개 정도 예를 올려 둡니다.

1. 이미지 매수를 변경하고 싶습니다.

이미지를 4장이 아니라 6장으로 하고 싶을 때의 변경 장소입니다.

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; }
}

해설하면 이번 경우 이 0%~100%라는 숫자는
「20초간의 내역」을 나타낸 것입니다.
또, opacity는, 투명도를 지정하는 것이므로, 0이라고 투명, 1로 완전 불투명이 됩니다.

이번은 4장의 이미지의 애니메이션을 20초로 흐르도록 설정하고 있으므로, 1장당 5초간. 즉, 20초의 25% 부분인 약 5초간을 경계로 페이드 인과 페이드 아웃을 설정해야 합니다.

그리고 2장째 이후에 animation-delay를 5초마다 걸치고 있기 때문에, 구조로서는, 1장의 화상이 완전 불투명해지고 있는 동안은, 다른 화상은 모두 투명해져 있기 때문에, 애니메이션이 완성되어 있습니다.

그래서 5% 부분을 제거하여 0%에서 25%, 즉 0초에서 5초에 걸쳐 투명에서 불완전 투명하게 만들 수 있어 천천히 애니메이션을 만들 수 있습니다.

요약

시각적으로 동적인 브라우저 쪽이, 현대적인 인상을 받기 쉽다고 생각하므로, 꼭 도입을 추천합니다.
자신의 취향에 손을 더해보세요.
봐 주셔서 감사합니다.