Infinite Animation Of Contents On Top Of Each Other Using CSS Keyframes

I have the following HTML and CSS code: As you can see in the code I display 5 contents on top of each other by using keyframes animation. I want to run this animation infinite th

Solution 1:

Define a longer animation.

The animation duration in this example is 5 seconds and the visible time frame is 2 seconds. Each div has a different delay, so when one is being fade out the other starts to fade in.

.parent {
  height: 10%;
  width: 100%;
  float: left;
  position: relative;
}

.parent div {
  animation-name: animation_01;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  opacity: 0;
}

.content1 {
  height: 100%;
  width: 20%;
  background-color: blue;
  position: absolute;
  opacity: 1;
}

.content2 {
  height: 100%;
  width: 20%;
  background-color: red;
  animation-delay: 1s;
  position: absolute;
}

.content3 {
  height: 100%;
  width: 20%;
  background-color: yellow;
  animation-delay: 2s;
  position: absolute;
}

.content4 {
  height: 100%;
  width: 20%;
  background-color: green;
  animation-delay: 3s;
  position: absolute;
}

.content5 {
  height: 100%;
  width: 20%;
  background-color: orange;
  animation-delay: 4s;
}

.parent {}

@keyframes animation_01 {
  20% {
    opacity: 1
  }
  0%, 40% , 100% {
    opacity: 0
  }
}


}

<div class="parent">
  <div class="content1">Here goes content1</div>
  <div class="content2">Here goes content2</div>
  <div class="content3">Here goes content3</div>
  <div class="content4">Here goes content4</div>
  <div class="content5">Here goes content5</div>
</div>