Sooraj Chandran Sooraj Chandran - 3 months ago 29
CSS Question

Change other element properties in CSS3 keyframes animation

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

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>