Mixing
Infinite animation of contents on top of each other using CSS keyframes
2
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?
html css css-animations keyframe
asked Nov 19 '18 at 13:51
Michi
1,0901022
add a comment |
2
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?
html css css-animations keyframe
asked Nov 19 '18 at 13:51
Michi
1,0901022
2
never make the delay a multiplier of the duration (or the opposite) ... if the duration is 2s and you delay one element by 4s and another one with 2s, then after 2 iteration they will start at the same time. Draw a timeline to better understand your issue.
– Temani Afif
Nov 19 '18 at 13:53
add a comment |
2
2
2
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?
html css css-animations keyframe
asked Nov 19 '18 at 13:51
Michi
1,0901022
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?
.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>.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>html css css-animations keyframe
html css css-animations keyframe
asked Nov 19 '18 at 13:51
Michi
1,0901022
asked Nov 19 '18 at 13:51
Michi
1,0901022
asked Nov 19 '18 at 13:51
Michi
1,0901022
asked Nov 19 '18 at 13:51
Michi
1,0901022
asked Nov 19 '18 at 13:51
Michi
1,0901022
1,0901022
2
never make the delay a multiplier of the duration (or the opposite) ... if the duration is 2s and you delay one element by 4s and another one with 2s, then after 2 iteration they will start at the same time. Draw a timeline to better understand your issue.
– Temani Afif
Nov 19 '18 at 13:53
add a comment |
2
never make the delay a multiplier of the duration (or the opposite) ... if the duration is 2s and you delay one element by 4s and another one with 2s, then after 2 iteration they will start at the same time. Draw a timeline to better understand your issue.
– Temani Afif
Nov 19 '18 at 13:53
2
2
never make the delay a multiplier of the duration (or the opposite) ... if the duration is 2s and you delay one element by 4s and another one with 2s, then after 2 iteration they will start at the same time. Draw a timeline to better understand your issue.
– Temani Afif
Nov 19 '18 at 13:53
never make the delay a multiplier of the duration (or the opposite) ... if the duration is 2s and you delay one element by 4s and another one with 2s, then after 2 iteration they will start at the same time. Draw a timeline to better understand your issue.
– Temani Afif
Nov 19 '18 at 13:53
add a comment |
1 Answer
1
active
oldest
votes
3
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>answered Nov 19 '18 at 14:03
Itay Gal
7,50152559
Thanks for your answer but how can I avoid the "blank" when content5 switches back to content1?
– Michi
Nov 19 '18 at 14:06
1
Instead of 6s for the whole animation set it to 5s. Then, divide your 100% per 5 (as 5 items). Meaning that opacity goes to 1 from 0 to 20%, and get back to 0 from 20% to 40%
– PIIANTOM
Nov 19 '18 at 14:08
Fixed it, check it out
– Itay Gal
Nov 19 '18 at 14:08
1
I am also wondering how exaclty the code works. So far my understanding was that within the keyframe animation it is defined how the frontend should look after the animation has reached X%. In the code above it seems that you define how the animation looks after each 20% and 40%. Do I understand this correctly?
– Michi
Nov 19 '18 at 14:34
1
Yes, also added an explanation to my answer.
– Itay Gal
Nov 19 '18 at 14:38
|
show 2 more comments
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%2f53376084%2finfinite-animation-of-contents-on-top-of-each-other-using-css-keyframes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
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>answered Nov 19 '18 at 14:03
Itay Gal
7,50152559
Thanks for your answer but how can I avoid the "blank" when content5 switches back to content1?
– Michi
Nov 19 '18 at 14:06
1
Instead of 6s for the whole animation set it to 5s. Then, divide your 100% per 5 (as 5 items). Meaning that opacity goes to 1 from 0 to 20%, and get back to 0 from 20% to 40%
– PIIANTOM
Nov 19 '18 at 14:08
Fixed it, check it out
– Itay Gal
Nov 19 '18 at 14:08
1
I am also wondering how exaclty the code works. So far my understanding was that within the keyframe animation it is defined how the frontend should look after the animation has reached X%. In the code above it seems that you define how the animation looks after each 20% and 40%. Do I understand this correctly?
– Michi
Nov 19 '18 at 14:34
1
Yes, also added an explanation to my answer.
– Itay Gal
Nov 19 '18 at 14:38
|
show 2 more comments
3
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>answered Nov 19 '18 at 14:03
Itay Gal
7,50152559
Thanks for your answer but how can I avoid the "blank" when content5 switches back to content1?
– Michi
Nov 19 '18 at 14:06
1
Instead of 6s for the whole animation set it to 5s. Then, divide your 100% per 5 (as 5 items). Meaning that opacity goes to 1 from 0 to 20%, and get back to 0 from 20% to 40%
– PIIANTOM
Nov 19 '18 at 14:08
Fixed it, check it out
– Itay Gal
Nov 19 '18 at 14:08
1
I am also wondering how exaclty the code works. So far my understanding was that within the keyframe animation it is defined how the frontend should look after the animation has reached X%. In the code above it seems that you define how the animation looks after each 20% and 40%. Do I understand this correctly?
– Michi
Nov 19 '18 at 14:34
1
Yes, also added an explanation to my answer.
– Itay Gal
Nov 19 '18 at 14:38
|
show 2 more comments
3
3
3
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>answered Nov 19 '18 at 14:03
Itay Gal
7,50152559
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>.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>.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>answered Nov 19 '18 at 14:03
Itay Gal
7,50152559
edited Nov 19 '18 at 14:37
answered Nov 19 '18 at 14:03
Itay Gal
7,50152559
answered Nov 19 '18 at 14:03
Itay Gal
7,50152559
answered Nov 19 '18 at 14:03
Itay Gal
7,50152559
7,50152559
Thanks for your answer but how can I avoid the "blank" when content5 switches back to content1?
– Michi
Nov 19 '18 at 14:06
1
Instead of 6s for the whole animation set it to 5s. Then, divide your 100% per 5 (as 5 items). Meaning that opacity goes to 1 from 0 to 20%, and get back to 0 from 20% to 40%
– PIIANTOM
Nov 19 '18 at 14:08
Fixed it, check it out
– Itay Gal
Nov 19 '18 at 14:08
1
I am also wondering how exaclty the code works. So far my understanding was that within the keyframe animation it is defined how the frontend should look after the animation has reached X%. In the code above it seems that you define how the animation looks after each 20% and 40%. Do I understand this correctly?
– Michi
Nov 19 '18 at 14:34
1
Yes, also added an explanation to my answer.
– Itay Gal
Nov 19 '18 at 14:38
|
show 2 more comments
Thanks for your answer but how can I avoid the "blank" when content5 switches back to content1?
– Michi
Nov 19 '18 at 14:06
1
Instead of 6s for the whole animation set it to 5s. Then, divide your 100% per 5 (as 5 items). Meaning that opacity goes to 1 from 0 to 20%, and get back to 0 from 20% to 40%
– PIIANTOM
Nov 19 '18 at 14:08
Fixed it, check it out
– Itay Gal
Nov 19 '18 at 14:08
1
I am also wondering how exaclty the code works. So far my understanding was that within the keyframe animation it is defined how the frontend should look after the animation has reached X%. In the code above it seems that you define how the animation looks after each 20% and 40%. Do I understand this correctly?
– Michi
Nov 19 '18 at 14:34
1
Yes, also added an explanation to my answer.
– Itay Gal
Nov 19 '18 at 14:38
Thanks for your answer but how can I avoid the "blank" when content5 switches back to content1?
– Michi
Nov 19 '18 at 14:06
Thanks for your answer but how can I avoid the "blank" when content5 switches back to content1?
– Michi
Nov 19 '18 at 14:06
1
1
Instead of 6s for the whole animation set it to 5s. Then, divide your 100% per 5 (as 5 items). Meaning that opacity goes to 1 from 0 to 20%, and get back to 0 from 20% to 40%
– PIIANTOM
Nov 19 '18 at 14:08
Instead of 6s for the whole animation set it to 5s. Then, divide your 100% per 5 (as 5 items). Meaning that opacity goes to 1 from 0 to 20%, and get back to 0 from 20% to 40%
– PIIANTOM
Nov 19 '18 at 14:08
Fixed it, check it out
– Itay Gal
Nov 19 '18 at 14:08
Fixed it, check it out
– Itay Gal
Nov 19 '18 at 14:08
1
1
I am also wondering how exaclty the code works. So far my understanding was that within the keyframe animation it is defined how the frontend should look after the animation has reached X%. In the code above it seems that you define how the animation looks after each 20% and 40%. Do I understand this correctly?
– Michi
Nov 19 '18 at 14:34
I am also wondering how exaclty the code works. So far my understanding was that within the keyframe animation it is defined how the frontend should look after the animation has reached X%. In the code above it seems that you define how the animation looks after each 20% and 40%. Do I understand this correctly?
– Michi
Nov 19 '18 at 14:34
1
1
Yes, also added an explanation to my answer.
– Itay Gal
Nov 19 '18 at 14:38
Yes, also added an explanation to my answer.
– Itay Gal
Nov 19 '18 at 14:38
|
show 2 more comments
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%2f53376084%2finfinite-animation-of-contents-on-top-of-each-other-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
2
never make the delay a multiplier of the duration (or the opposite) ... if the duration is 2s and you delay one element by 4s and another one with 2s, then after 2 iteration they will start at the same time. Draw a timeline to better understand your issue.
– Temani Afif
Nov 19 '18 at 13:53