How to add a quick fade in and out to CSS animation
-2
'How can I' add a quick fade in and out to a CSS animation?
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0%,
49% {
background-color: white;
}
50%,
100% {
background-color: #8b72da;
}<li class="section-1"></li>Any help would be great, cheers
html css css3 animation
edited Nov 20 at 15:24
Smollet777
1,3461015
asked Nov 20 at 14:28
John
76772750
add a comment |
-2
'How can I' add a quick fade in and out to a CSS animation?
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0%,
49% {
background-color: white;
}
50%,
100% {
background-color: #8b72da;
}<li class="section-1"></li>Any help would be great, cheers
html css css3 animation
edited Nov 20 at 15:24
Smollet777
1,3461015
asked Nov 20 at 14:28
John
76772750
use0% {} 50% {}then
– Smollet777
Nov 20 at 14:30
1
Would also be great, if you managed to ask an actual question. (“I want” isn’t one.)
– misorude
Nov 20 at 14:31
@misorude you match your username ;-) thanks for the tip! :-/
– John
Nov 20 at 14:32
2
Adding “how can I” in front does not make this a proper question either. Explain what you have researched so far, and show what you have tried.
– misorude
Nov 20 at 14:34
@missorude, I think there is enough information there to go off, research is there and an example. What more do you want? Rather than picking at things, try being more helpful and cut out the attitude in your text.
– John
Nov 20 at 14:43
add a comment |
-2
-2
-2
'How can I' add a quick fade in and out to a CSS animation?
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0%,
49% {
background-color: white;
}
50%,
100% {
background-color: #8b72da;
}<li class="section-1"></li>Any help would be great, cheers
html css css3 animation
edited Nov 20 at 15:24
Smollet777
1,3461015
asked Nov 20 at 14:28
John
76772750
'How can I' add a quick fade in and out to a CSS animation?
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0%,
49% {
background-color: white;
}
50%,
100% {
background-color: #8b72da;
}<li class="section-1"></li>Any help would be great, cheers
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0%,
49% {
background-color: white;
}
50%,
100% {
background-color: #8b72da;
}<li class="section-1"></li>.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0%,
49% {
background-color: white;
}
50%,
100% {
background-color: #8b72da;
}<li class="section-1"></li>html css css3 animation
html css css3 animation
edited Nov 20 at 15:24
Smollet777
1,3461015
asked Nov 20 at 14:28
John
76772750
edited Nov 20 at 15:24
Smollet777
1,3461015
asked Nov 20 at 14:28
John
76772750
edited Nov 20 at 15:24
Smollet777
1,3461015
edited Nov 20 at 15:24
Smollet777
1,3461015
edited Nov 20 at 15:24
Smollet777
1,3461015
1,3461015
asked Nov 20 at 14:28
John
76772750
asked Nov 20 at 14:28
John
76772750
asked Nov 20 at 14:28
John
76772750
76772750
use0% {} 50% {}then
– Smollet777
Nov 20 at 14:30
1
Would also be great, if you managed to ask an actual question. (“I want” isn’t one.)
– misorude
Nov 20 at 14:31
@misorude you match your username ;-) thanks for the tip! :-/
– John
Nov 20 at 14:32
2
Adding “how can I” in front does not make this a proper question either. Explain what you have researched so far, and show what you have tried.
– misorude
Nov 20 at 14:34
@missorude, I think there is enough information there to go off, research is there and an example. What more do you want? Rather than picking at things, try being more helpful and cut out the attitude in your text.
– John
Nov 20 at 14:43
add a comment |
use0% {} 50% {}then
– Smollet777
Nov 20 at 14:30
1
Would also be great, if you managed to ask an actual question. (“I want” isn’t one.)
– misorude
Nov 20 at 14:31
@misorude you match your username ;-) thanks for the tip! :-/
– John
Nov 20 at 14:32
2
Adding “how can I” in front does not make this a proper question either. Explain what you have researched so far, and show what you have tried.
– misorude
Nov 20 at 14:34
@missorude, I think there is enough information there to go off, research is there and an example. What more do you want? Rather than picking at things, try being more helpful and cut out the attitude in your text.
– John
Nov 20 at 14:43
use
0% {} 50% {} then– Smollet777
Nov 20 at 14:30
use
0% {} 50% {} then– Smollet777
Nov 20 at 14:30
1
1
Would also be great, if you managed to ask an actual question. (“I want” isn’t one.)
– misorude
Nov 20 at 14:31
Would also be great, if you managed to ask an actual question. (“I want” isn’t one.)
– misorude
Nov 20 at 14:31
@misorude you match your username ;-) thanks for the tip! :-/
– John
Nov 20 at 14:32
@misorude you match your username ;-) thanks for the tip! :-/
– John
Nov 20 at 14:32
2
2
Adding “how can I” in front does not make this a proper question either. Explain what you have researched so far, and show what you have tried.
– misorude
Nov 20 at 14:34
Adding “how can I” in front does not make this a proper question either. Explain what you have researched so far, and show what you have tried.
– misorude
Nov 20 at 14:34
@missorude, I think there is enough information there to go off, research is there and an example. What more do you want? Rather than picking at things, try being more helpful and cut out the attitude in your text.
– John
Nov 20 at 14:43
@missorude, I think there is enough information there to go off, research is there and an example. What more do you want? Rather than picking at things, try being more helpful and cut out the attitude in your text.
– John
Nov 20 at 14:43
add a comment |
3 Answers
3
active
oldest
votes
0
I think this is what you're looking for. I increased the duration of the animation to make the fade more apparent. Basically you have to play with the percentage values in the animation, so the transition from white to the other color doesn't happen within 1% of the animation duration:
.section-flash-ul {
list-style: none;
width: 100%;
display: inline-block;
padding: 0;
margin: 0;
}
.section-flash-item {
border: 1px solid black;
width: 33.333%;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
.section-1 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #8b72da;
}
}
.section-2 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION2 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #9d89de;
}
}
.section-3 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION3 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #b5a8e0;
}
}<ul class="section-flash-ul">
<li class="section-flash-item section-1"></li>
<li class="section-flash-item section-2"></li>
<li class="section-flash-item section-2"></li>
</ul>
<div class="quadrat">
</div>answered Nov 20 at 14:42
Maharkus
1,8201020
add a comment |
0
Seems like you need three animation positions instead of two:
animation: my-animation 1.3s infinite;
@-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}
100% {
background-color: white;
}
Notice, in your example, you had css holding the background at white from 0 to 49%, and then the solid color from 50% to 100%. If you want smoother effects, give css more time between these states to perform the transition.
answered Nov 20 at 14:43
Mikolaj Figurski
124
add a comment |
0
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}<li class="section-1"></li>I don't know where do you find that approach of using keyframes but from 0% to 50% would be enough.
answered Nov 20 at 14:44
Smollet777
1,3461015
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%2f53395185%2fhow-to-add-a-quick-fade-in-and-out-to-css-animation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I think this is what you're looking for. I increased the duration of the animation to make the fade more apparent. Basically you have to play with the percentage values in the animation, so the transition from white to the other color doesn't happen within 1% of the animation duration:
.section-flash-ul {
list-style: none;
width: 100%;
display: inline-block;
padding: 0;
margin: 0;
}
.section-flash-item {
border: 1px solid black;
width: 33.333%;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
.section-1 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #8b72da;
}
}
.section-2 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION2 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #9d89de;
}
}
.section-3 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION3 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #b5a8e0;
}
}<ul class="section-flash-ul">
<li class="section-flash-item section-1"></li>
<li class="section-flash-item section-2"></li>
<li class="section-flash-item section-2"></li>
</ul>
<div class="quadrat">
</div>answered Nov 20 at 14:42
Maharkus
1,8201020
add a comment |
0
I think this is what you're looking for. I increased the duration of the animation to make the fade more apparent. Basically you have to play with the percentage values in the animation, so the transition from white to the other color doesn't happen within 1% of the animation duration:
.section-flash-ul {
list-style: none;
width: 100%;
display: inline-block;
padding: 0;
margin: 0;
}
.section-flash-item {
border: 1px solid black;
width: 33.333%;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
.section-1 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #8b72da;
}
}
.section-2 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION2 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #9d89de;
}
}
.section-3 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION3 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #b5a8e0;
}
}<ul class="section-flash-ul">
<li class="section-flash-item section-1"></li>
<li class="section-flash-item section-2"></li>
<li class="section-flash-item section-2"></li>
</ul>
<div class="quadrat">
</div>answered Nov 20 at 14:42
Maharkus
1,8201020
add a comment |
0
0
0
I think this is what you're looking for. I increased the duration of the animation to make the fade more apparent. Basically you have to play with the percentage values in the animation, so the transition from white to the other color doesn't happen within 1% of the animation duration:
.section-flash-ul {
list-style: none;
width: 100%;
display: inline-block;
padding: 0;
margin: 0;
}
.section-flash-item {
border: 1px solid black;
width: 33.333%;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
.section-1 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #8b72da;
}
}
.section-2 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION2 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #9d89de;
}
}
.section-3 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION3 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #b5a8e0;
}
}<ul class="section-flash-ul">
<li class="section-flash-item section-1"></li>
<li class="section-flash-item section-2"></li>
<li class="section-flash-item section-2"></li>
</ul>
<div class="quadrat">
</div>answered Nov 20 at 14:42
Maharkus
1,8201020
I think this is what you're looking for. I increased the duration of the animation to make the fade more apparent. Basically you have to play with the percentage values in the animation, so the transition from white to the other color doesn't happen within 1% of the animation duration:
.section-flash-ul {
list-style: none;
width: 100%;
display: inline-block;
padding: 0;
margin: 0;
}
.section-flash-item {
border: 1px solid black;
width: 33.333%;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
.section-1 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #8b72da;
}
}
.section-2 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION2 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #9d89de;
}
}
.section-3 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION3 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #b5a8e0;
}
}<ul class="section-flash-ul">
<li class="section-flash-item section-1"></li>
<li class="section-flash-item section-2"></li>
<li class="section-flash-item section-2"></li>
</ul>
<div class="quadrat">
</div>.section-flash-ul {
list-style: none;
width: 100%;
display: inline-block;
padding: 0;
margin: 0;
}
.section-flash-item {
border: 1px solid black;
width: 33.333%;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
.section-1 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #8b72da;
}
}
.section-2 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION2 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #9d89de;
}
}
.section-3 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION3 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #b5a8e0;
}
}<ul class="section-flash-ul">
<li class="section-flash-item section-1"></li>
<li class="section-flash-item section-2"></li>
<li class="section-flash-item section-2"></li>
</ul>
<div class="quadrat">
</div>.section-flash-ul {
list-style: none;
width: 100%;
display: inline-block;
padding: 0;
margin: 0;
}
.section-flash-item {
border: 1px solid black;
width: 33.333%;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
.section-1 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #8b72da;
}
}
.section-2 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION2 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION2 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #9d89de;
}
}
.section-3 {
/* width: 50px;
height: 50px; */
-webkit-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION3 2.3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes NAME-YOUR-ANIMATION3 {
0%, 30% {
background-color: white;
}
50%, 80% {
background-color: #b5a8e0;
}
}<ul class="section-flash-ul">
<li class="section-flash-item section-1"></li>
<li class="section-flash-item section-2"></li>
<li class="section-flash-item section-2"></li>
</ul>
<div class="quadrat">
</div>answered Nov 20 at 14:42
Maharkus
1,8201020
answered Nov 20 at 14:42
Maharkus
1,8201020
answered Nov 20 at 14:42
Maharkus
1,8201020
answered Nov 20 at 14:42
Maharkus
1,8201020
1,8201020
add a comment |
add a comment |
0
Seems like you need three animation positions instead of two:
animation: my-animation 1.3s infinite;
@-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}
100% {
background-color: white;
}
Notice, in your example, you had css holding the background at white from 0 to 49%, and then the solid color from 50% to 100%. If you want smoother effects, give css more time between these states to perform the transition.
answered Nov 20 at 14:43
Mikolaj Figurski
124
add a comment |
0
Seems like you need three animation positions instead of two:
animation: my-animation 1.3s infinite;
@-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}
100% {
background-color: white;
}
Notice, in your example, you had css holding the background at white from 0 to 49%, and then the solid color from 50% to 100%. If you want smoother effects, give css more time between these states to perform the transition.
answered Nov 20 at 14:43
Mikolaj Figurski
124
add a comment |
0
0
0
Seems like you need three animation positions instead of two:
animation: my-animation 1.3s infinite;
@-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}
100% {
background-color: white;
}
Notice, in your example, you had css holding the background at white from 0 to 49%, and then the solid color from 50% to 100%. If you want smoother effects, give css more time between these states to perform the transition.
answered Nov 20 at 14:43
Mikolaj Figurski
124
Seems like you need three animation positions instead of two:
animation: my-animation 1.3s infinite;
@-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}
100% {
background-color: white;
}
Notice, in your example, you had css holding the background at white from 0 to 49%, and then the solid color from 50% to 100%. If you want smoother effects, give css more time between these states to perform the transition.
answered Nov 20 at 14:43
Mikolaj Figurski
124
answered Nov 20 at 14:43
Mikolaj Figurski
124
answered Nov 20 at 14:43
Mikolaj Figurski
124
answered Nov 20 at 14:43
Mikolaj Figurski
124
124
add a comment |
add a comment |
0
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}<li class="section-1"></li>I don't know where do you find that approach of using keyframes but from 0% to 50% would be enough.
answered Nov 20 at 14:44
Smollet777
1,3461015
add a comment |
0
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}<li class="section-1"></li>I don't know where do you find that approach of using keyframes but from 0% to 50% would be enough.
answered Nov 20 at 14:44
Smollet777
1,3461015
add a comment |
0
0
0
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}<li class="section-1"></li>I don't know where do you find that approach of using keyframes but from 0% to 50% would be enough.
answered Nov 20 at 14:44
Smollet777
1,3461015
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}<li class="section-1"></li>I don't know where do you find that approach of using keyframes but from 0% to 50% would be enough.
.section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}<li class="section-1"></li> .section-1 {
-webkit-animation: my-animation 1.3s infinite;
/* Safari 4+ */
-moz-animation: my-animation 1.3s infinite;
/* Fx 5+ */
-o-animation: my-animation 1.3s infinite;
/* Opera 12+ */
animation: my-animation 1.3s infinite;
/* IE 10+, Fx 29+ */
}
@-webkit-keyframes my-animation {
0% {
background-color: white;
}
50% {
background-color: #8b72da;
}<li class="section-1"></li>answered Nov 20 at 14:44
Smollet777
1,3461015
answered Nov 20 at 14:44
Smollet777
1,3461015
answered Nov 20 at 14:44
Smollet777
1,3461015
answered Nov 20 at 14:44
Smollet777
1,3461015
1,3461015
add a comment |
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%2f53395185%2fhow-to-add-a-quick-fade-in-and-out-to-css-animation%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
use
0% {} 50% {}then– Smollet777
Nov 20 at 14:30
1
Would also be great, if you managed to ask an actual question. (“I want” isn’t one.)
– misorude
Nov 20 at 14:31
@misorude you match your username ;-) thanks for the tip! :-/
– John
Nov 20 at 14:32
2
Adding “how can I” in front does not make this a proper question either. Explain what you have researched so far, and show what you have tried.
– misorude
Nov 20 at 14:34
@missorude, I think there is enough information there to go off, research is there and an example. What more do you want? Rather than picking at things, try being more helpful and cut out the attitude in your text.
– John
Nov 20 at 14:43