Mixing
Display one content after another using CSS keyframes
0
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?
html css css-animations keyframe
asked Nov 19 '18 at 12:54
Michi
1,0901022
add a comment |
0
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?
html css css-animations keyframe
asked Nov 19 '18 at 12:54
Michi
1,0901022
So, do you want to first show content1, hide content1. then show content2, hide content2, and so on?
– Samir
Nov 19 '18 at 13:02
That is exactly what I am looking for.
– Michi
Nov 19 '18 at 13:02
2
Check @Itay Gal's answer.
– Samir
Nov 19 '18 at 13:11
add a comment |
0
0
0
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?
html css css-animations keyframe
asked Nov 19 '18 at 12:54
Michi
1,0901022
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?
.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>.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>html css css-animations keyframe
html css css-animations keyframe
asked Nov 19 '18 at 12:54
Michi
1,0901022
asked Nov 19 '18 at 12:54
Michi
1,0901022
edited Nov 19 '18 at 13:30
asked Nov 19 '18 at 12:54
Michi
1,0901022
asked Nov 19 '18 at 12:54
Michi
1,0901022
asked Nov 19 '18 at 12:54
Michi
1,0901022
1,0901022
So, do you want to first show content1, hide content1. then show content2, hide content2, and so on?
– Samir
Nov 19 '18 at 13:02
That is exactly what I am looking for.
– Michi
Nov 19 '18 at 13:02
2
Check @Itay Gal's answer.
– Samir
Nov 19 '18 at 13:11
add a comment |
So, do you want to first show content1, hide content1. then show content2, hide content2, and so on?
– Samir
Nov 19 '18 at 13:02
That is exactly what I am looking for.
– Michi
Nov 19 '18 at 13:02
2
Check @Itay Gal's answer.
– Samir
Nov 19 '18 at 13:11
So, do you want to first show content1, hide content1. then show content2, hide content2, and so on?
– Samir
Nov 19 '18 at 13:02
So, do you want to first show content1, hide content1. then show content2, hide content2, and so on?
– Samir
Nov 19 '18 at 13:02
That is exactly what I am looking for.
– Michi
Nov 19 '18 at 13:02
That is exactly what I am looking for.
– Michi
Nov 19 '18 at 13:02
2
2
Check @Itay Gal's answer.
– Samir
Nov 19 '18 at 13:11
Check @Itay Gal's answer.
– Samir
Nov 19 '18 at 13:11
add a comment |
2 Answers
2
active
oldest
votes
2
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>answered Nov 19 '18 at 13:03
Itay Gal
7,45352559
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
I also added your answer to the JSfiddle here: jsfiddle.net/d0avt37f/1
– Michi
Nov 19 '18 at 13:29
1
Not sure why, the code is inside the answer. Check out the third code snippet.
– Itay Gal
Nov 19 '18 at 13:30
Thanks man for the additional help.
– Michi
Nov 19 '18 at 13:31
jsfiddle.net/d0avt37f/3
– Michi
Nov 19 '18 at 13:39
|
show 1 more comment
1
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>answered Nov 19 '18 at 13:02
Aaron McGuire
4328
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 jsfiddle.net/WebTiger/mp9cvg4t/1 becasue I might need it for something else later.
– Michi
Nov 19 '18 at 13:12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375100%2fdisplay-one-content-after-another-using-css-keyframes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
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>answered Nov 19 '18 at 13:03
Itay Gal
7,45352559
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
I also added your answer to the JSfiddle here: jsfiddle.net/d0avt37f/1
– Michi
Nov 19 '18 at 13:29
1
Not sure why, the code is inside the answer. Check out the third code snippet.
– Itay Gal
Nov 19 '18 at 13:30
Thanks man for the additional help.
– Michi
Nov 19 '18 at 13:31
jsfiddle.net/d0avt37f/3
– Michi
Nov 19 '18 at 13:39
|
show 1 more comment
2
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>answered Nov 19 '18 at 13:03
Itay Gal
7,45352559
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
I also added your answer to the JSfiddle here: jsfiddle.net/d0avt37f/1
– Michi
Nov 19 '18 at 13:29
1
Not sure why, the code is inside the answer. Check out the third code snippet.
– Itay Gal
Nov 19 '18 at 13:30
Thanks man for the additional help.
– Michi
Nov 19 '18 at 13:31
jsfiddle.net/d0avt37f/3
– Michi
Nov 19 '18 at 13:39
|
show 1 more comment
2
2
2
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>answered Nov 19 '18 at 13:03
Itay Gal
7,45352559
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>.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>.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>.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>.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>.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>.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>answered Nov 19 '18 at 13:03
Itay Gal
7,45352559
edited Nov 19 '18 at 13:22
answered Nov 19 '18 at 13:03
Itay Gal
7,45352559
answered Nov 19 '18 at 13:03
Itay Gal
7,45352559
answered Nov 19 '18 at 13:03
Itay Gal
7,45352559
7,45352559
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
I also added your answer to the JSfiddle here: jsfiddle.net/d0avt37f/1
– Michi
Nov 19 '18 at 13:29
1
Not sure why, the code is inside the answer. Check out the third code snippet.
– Itay Gal
Nov 19 '18 at 13:30
Thanks man for the additional help.
– Michi
Nov 19 '18 at 13:31
jsfiddle.net/d0avt37f/3
– Michi
Nov 19 '18 at 13:39
|
show 1 more comment
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
I also added your answer to the JSfiddle here: jsfiddle.net/d0avt37f/1
– Michi
Nov 19 '18 at 13:29
1
Not sure why, the code is inside the answer. Check out the third code snippet.
– Itay Gal
Nov 19 '18 at 13:30
Thanks man for the additional help.
– Michi
Nov 19 '18 at 13:31
jsfiddle.net/d0avt37f/3
– Michi
Nov 19 '18 at 13:39
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
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
I also added your answer to the JSfiddle here: jsfiddle.net/d0avt37f/1
– Michi
Nov 19 '18 at 13:29
I also added your answer to the JSfiddle here: jsfiddle.net/d0avt37f/1
– Michi
Nov 19 '18 at 13:29
1
1
Not sure why, the code is inside the answer. Check out the third code snippet.
– Itay Gal
Nov 19 '18 at 13:30
Not sure why, the code is inside the answer. Check out the third code snippet.
– Itay Gal
Nov 19 '18 at 13:30
Thanks man for the additional help.
– Michi
Nov 19 '18 at 13:31
Thanks man for the additional help.
– Michi
Nov 19 '18 at 13:31
jsfiddle.net/d0avt37f/3
– Michi
Nov 19 '18 at 13:39
jsfiddle.net/d0avt37f/3
– Michi
Nov 19 '18 at 13:39
|
show 1 more comment
1
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>answered Nov 19 '18 at 13:02
Aaron McGuire
4328
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 jsfiddle.net/WebTiger/mp9cvg4t/1 becasue I might need it for something else later.
– Michi
Nov 19 '18 at 13:12
add a comment |
1
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>answered Nov 19 '18 at 13:02
Aaron McGuire
4328
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 jsfiddle.net/WebTiger/mp9cvg4t/1 becasue I might need it for something else later.
– Michi
Nov 19 '18 at 13:12
add a comment |
1
1
1
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>answered Nov 19 '18 at 13:02
Aaron McGuire
4328
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>.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>.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>answered Nov 19 '18 at 13:02
Aaron McGuire
4328
answered Nov 19 '18 at 13:02
Aaron McGuire
4328
answered Nov 19 '18 at 13:02
Aaron McGuire
4328
answered Nov 19 '18 at 13:02
Aaron McGuire
4328
4328
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 jsfiddle.net/WebTiger/mp9cvg4t/1 becasue I might need it for something else later.
– Michi
Nov 19 '18 at 13:12
add a comment |
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 jsfiddle.net/WebTiger/mp9cvg4t/1 becasue I might need it for something else later.
– Michi
Nov 19 '18 at 13:12
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 jsfiddle.net/WebTiger/mp9cvg4t/1 becasue I might need it for something else later.
– Michi
Nov 19 '18 at 13:12
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 jsfiddle.net/WebTiger/mp9cvg4t/1 becasue I might need it for something else later.
– Michi
Nov 19 '18 at 13:12
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375100%2fdisplay-one-content-after-another-using-css-keyframes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
So, do you want to first show content1, hide content1. then show content2, hide content2, and so on?
– Samir
Nov 19 '18 at 13:02
That is exactly what I am looking for.
– Michi
Nov 19 '18 at 13:02
2
Check @Itay Gal's answer.
– Samir
Nov 19 '18 at 13:11