Infinite animation of contents on top of each other using CSS keyframes - html

Question

I have the following HTML and CSS code:
.parent{
height: 10%;
width: 100%;
float: left;
position: relative;
}
.content1{
height: 100%;
width: 20%;
background-color: blue;
float: left;
position: absolute;
}
.content2{
height: 100%;
width: 20%;
background-color: red;
float: left;
animation-delay: 1s;
position: absolute;
}
.content3{
height: 100%;
width: 20%;
background-color:yellow;
float: left;
animation-delay: 2s;
position: absolute;
}
.content4{
height: 100%;
width: 20%;
background-color: green;
float: left;
animation-delay: 3s;
position: absolute;
}
.content5{
height: 100%;
width: 20%;
background-color: orange;
float: left;
animation-delay: 4s;
}
.parent div {
animation-name: animation_01;
animation-duration:2s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
#keyframes animation_01 {
0% {
opacity: 0
}
50% {
opacity: 1
}
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>
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 therefore I put animation-iteration-count:infinite;.
However, once the animation reaches content5 it does not go back to content1 and starts all over again. Instead, it only goes back to content4 and then shows/hides content4 and content5 in an infinite loop.
What do I have to change in my code so the animation goes back to content1 and starts the animation all over again?

Answer 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>