How to add a quick fade in and out to CSS animation - html

Question

'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

Answer 1

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>

Answer 2

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.

Answer 3

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