Display one content after another using CSS keyframes

Question

I have the following HMTL and CSS:

.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;
}
 
 .content3{ 
 height: 100%;
 width: 20%;
 background-color:yellow;
 float: left;
}
 
.content4{
 height: 100%;
 width: 20%; 
 background-color: green;
 float: left;
}
 
 .content5{
 height: 100%;
 width: 20%;
 background-color: orange;
 float: left;
}
 
 
 
.parent {
 animation-name: animation_01;
 animation-duration:5s;
 animation-iteration-count:1;
 animation-fill-mode: forwards;
 }


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

}

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

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. Therefore, I wanted to use the opacity function within the animation of the CSS. However, I could not yet figure out how I can use opacity for an individual content because right now the animation only runs for all five contents combined.

Do you know if its is possible to get this animation working within @keyframes or do I need javascript/jQuery like in the example here?

So, do you want to first show content1, hide content1. then show content2, hide content2, and so on? — Samir Selia, Nov 19 '18 at 13:02

Itay Gal · Accepted Answer · 2018-11-19T13:22:03.883

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

.parent div {
  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
  }
}


}

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

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

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

.parent div {
  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
  }
}


}

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

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

.parent div {
  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
  }
}


}

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

Looks good. Thanks for your help. Do you also have an idea how I can solve the issue if I want to show the contents one after another but instead of next to each other they are displayed on top of each other? — Michi, Nov 19 '18 at 13:15
Not sure why, the code is inside the answer. Check out the third code snippet. — Itay Gal, Nov 19 '18 at 13:30
You might also have an idea for that: https://stackoverflow.com/questions/53376084/infinite-animation-of-contents-on-top-of-each-other-using-css-keyframes — Michi, Nov 19 '18 at 13:52

score 1 · Answer 2 · answered Nov 19 '18 at 13:02

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

 .parent div{
 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;
  }

}

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

Nice but do you also have a solution if I want to first show content1, hide content1, then show content2, hide content2, and so on ... I have saved your current solution here https://jsfiddle.net/WebTiger/mp9cvg4t/1/ becasue I might need it for something else later. — Michi, Nov 19 '18 at 13:12

Display one content after another using CSS keyframes

2 Answers2

Linked