Display One Content After Another Using Css Keyframes

I have the following HMTL and CSS: This code itself works fine. You can also find it in the JSfiddle here. My target now is to display content1 to content5 one after another. Th

Solution 1:

You need to animate each div. You can use the same animation for all. For each div set animation-delay. Here is an example with the animation you defined in the question:

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

.parentdiv {
  animation-name: animation_01;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

.content1 {
  height: 100%;
  width: 20%;
  background-color: blue;
  float: left;
}

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

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

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

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

.parent {}

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


}

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

or if you want each item to be shown for only 1 second for example:

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

.parentdiv {
  animation-name: animation_01;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

.content1 {
  height: 100%;
  width: 20%;
  background-color: blue;
  float: left;
}

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

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

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

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

.parent {}

@keyframes animation_01 {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}


}

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

UPDATE

To show them one on top of another set the parent position:relative and the children with position: absolute

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

.parentdiv {
  animation-name: animation_01;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

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

.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 {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}


}

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

Solution 2:

The idea is to add the animation onto the child element rather than the parent and add a animation-delay to delay the start time of each animation ( this is considerably easier when using sass )

.parent{
 height: 10%;
 width: 100%;
 float: left;	 
}
 
.content1{
 height: 100%;
 width: 20%;
 background-color: blue;
 float: left;

 
}
 
 .content2{
 height: 100%;
 width: 20%;
 background-color: red;
 float: left;
 animation-delay:.4s;
}
 
 .content3{ 
 height: 100%;
 width: 20%;
 background-color:yellow;
 float: left;
  animation-delay:.8s;
}
 
.content4{
 height: 100%;
 width: 20%;	
 background-color: green;
 float: left;
  animation-delay:1.2s;
}
 
 .content5{
 height: 100%;
 width: 20%;
 background-color: orange;
 float: left;
  animation-delay:1.6s;
}
 
 
 

 .parentdiv{
 animation-name: animation_01;
 animation-duration:5s;
 animation-iteration-count:1;
 animation-fill-mode: forwards;
 opacity:0;
}

@keyframes animation_01 {
	
    0% {
    opacity: 0;
    }
    100%{
    opacity:1;
  }

}

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