CODEWITHSUNDEEP
htmlcsscss-animationskeyframe
Michi
Michi

Reputation: 5471

Display one content after another using CSS keyframes

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?

Upvotes: 0

Views: 627

Answers (2)

Itay Gal
Itay Gal

Reputation: 10834

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>

Upvotes: 3

Aaron McGuire
Aaron McGuire

Reputation: 1255

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>

Upvotes: 1

Related Questions