Change other element properties in CSS3 keyframes animation - html

Question

I have the following code.
#mf-loader-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 30px;
}
.mf-loader-circle {
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
border: 2px solid #03C9A9;
top: -15px;
background: white;
text-align: center;
line-height: 30px;
color: #03C9A9;
}
.mf-loader-text {
position: absolute;
width: 150px;
top: 20px;
}
#one-text {
left: -10px;
}
#two-text {
left: 200px;
}
#three-text {
left: 480px;
}
#two {
left: 240px;
}
#three {
left: 490px;
}
#mf-loader {
width: 100%;
height: 3px;
background: #03C9A9;
position: absolute;
-webkit-animation: mymove 5s;
/* Chrome, Safari, Opera */
animation: mymove 5s;
border-radius: 3px;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
width: 0px;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
width: 0px;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
<div id="mf-loader-container">
<div id="mf-loader">
<div class="mf-loader-circle" id="one">
1
</div>
<div class="mf-loader-circle" id="two">
2
</div>
<div class="mf-loader-circle" id="three">
3
</div>
<div class="mf-loader-text" id="one-text">
Each day will be better than last.
<br>This one especially
</div>
<div class="mf-loader-text" id="two-text">
Subscribing .. Thank you for subscribing. We appreciate it!
</div>
<div class="mf-loader-text" id="three-text">
DONE
</div>
</div>
</div>
It is a simple loader using CSS keyframes. Now I'm trying to control the opacity of the text elements beneath the numbers inside the keyframe animations. I'm trying to change the opacity of each text from 0 to 1 as the line reaches that particular point (keyframe reaches respective % ) - Is this possible in CSS alone ?

Answer 1

You can create that by defining another keyframes just for changing font-color and by even including animation-delay, animation-fill-mode to change font-color when line reaches at the end point.
animation-delay :
The animation-delay CSS property specifies when the animation should
start. This lets the animation sequence begin some time after it's
applied to an element.
animation-fill-mode :
The animation-fill-mode CSS property specifies how a CSS animation
should apply styles to its target before and after it is executing.
#mf-loader-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 500px;
height: 30px;
}
.mf-loader-circle {
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
border: 2px solid #03C9A9;
top: -15px;
background: white;
text-align: center;
line-height: 30px;
color: #03C9A9;
}
.mf-loader-text {
position: absolute;
width: 150px;
top: 20px;
}
#one-text {
left: -10px;
-webkit-animation: cl 3s;
}
#two-text {
left: 200px;
-webkit-animation: cl 3s;
-webkit-animation-delay:2s;
-webkit-animation-fill-mode:forwards;
color:rgba(1,1,1,0.6);
}
#three-text {
left: 480px;
-webkit-animation: cl 3s;
-webkit-animation-delay:3s;
-webkit-animation-fill-mode:forwards;
color:rgba(1,1,1,0.6);
}
#-webkit-keyframes cl{
from{
color:rgba(1,1,1,0.6);
}
to{
color:rgba(1,1,1,1);
}
}
#two {
left: 240px;
}
#three {
left: 490px;
}
#mf-loader {
width: 100%;
height: 3px;
background: #03C9A9;
position: absolute;
-webkit-animation: mymove 5s;
/* Chrome, Safari, Opera */
animation: mymove 5s;
border-radius: 3px;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
width: 0px;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
width: 0px;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
<div id="mf-loader-container">
<div id="mf-loader">
<div class="mf-loader-circle" id="one">
1
</div>
<div class="mf-loader-circle" id="two">
2
</div>
<div class="mf-loader-circle" id="three">
3
</div>
<div class="mf-loader-text" id="one-text">
Each day will be better than last.
<br>This one especially
</div>
<div class="mf-loader-text" id="two-text">
Subscribing .. Thank you for subscribing. We appreciate it!
</div>
<div class="mf-loader-text" id="three-text">
DONE
</div>
</div>
</div>