css change icon color from white to specified one after other

Question

I have three divs which have icons. These three divs are like three onboarding steps, right now all the three icons have a shade of red.

What I want to achieve is: icon color should change from white or any suitable color to the current shade of red but one after other i.e. first icon changes color then second and then third.

My HTML:

<div class="onboarding-flow mdl-grid">
    <div class="mdl-cell mdl-cell--4-col">
        <div id="circle">
            <i class="onboarding-icon material-icons">local_phone</i>
        </div>
        <div class="onboarding-text">
            <p>Tell us your problem domain and we will customize our solution to meet your specific needs</p>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--4-col">
        <div id="circle">
            <i class="onboarding-icon material-icons">group</i>
        </div>
        <div class="onboarding-text">
            <p>Engage your project stakeholders, end users without any time hassle to build together a clear product vision</p>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--4-col">
        <div id="circle">
            <i class="onboarding-icon material-icons">trending_up</i>
        </div>
        <div class="onboarding-text">
            <p>Benefit from our analytics to understand your users and their vision for the product.  Build Personas to take best design decisions and streamline important product features </p>
        </div>
    </div>
</div>

And css:

.onboarding-flow{
    align-content: center;
    padding-top: 2%;
}

#circle {
    display: inline-block;
    width: 150px;
    height: 150px;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    border-radius: 75px;
    background: #EF9A9A;
    text-align: center;
}

.onboarding-icon{
    align-self: center;
    color: #F44336;
    font-size: 65px;
    position:relative;
    top: calc(50% - 35px);

}


.onboarding-text {
    position: relative;
    padding-top: 2%;
    width: 60%;
    left: 20%;
}
.onboarding-text p {
    font-size: 17px;
}

How can I achieve this? Following is the mockup for the effect:

what I have tried:

.onboarding-icon{
    align-self: center;
    color: #F44336;
    font-size: 65px;
    position:relative;
    top: calc(50% - 35px);

    animation: colorchange 10s; /* animation-name followed by duration in seconds*/
    /* you could also use milliseconds (ms) or something like 2.5s */
    -webkit-animation: colorchange 10s; /* Chrome and Safari */

}
@keyframes colorchange
{
    0%  {color: yellow;}
    50% {color: red;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
    0%  {color: yellow;}
    50% {color: red;}
}

This changes color but not in the order

Answer 1

Here's a CSS animation to get you started. It's not completely there but should get you close enough you can polish the rest.

Each .circle uses the same animation, with the animation-duration delayed for each circle to give them the offset.

.onboarding-flow {
  align-content: center;
  padding-top: 2%;
}

.circle {
  display: inline-block;
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  -webkit-border-radius: 75px;
  -moz-border-radius: 75px;
  border-radius: 75px;
  background: transparent;
  text-align: center;
  border: 3px solid #cccccc;
  animation-name: pop;
  animation-iteration-count: 1;
  animation-duration: 0.3s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  color: #cccccc;
}
.circle-1 {
  animation-delay: 1s;
}
.circle-2 {
  animation-delay: 2s;
}
.circle-3 {
  animation-delay: 3s;
}

.onboarding-icon {
  align-self: center;
  font-size: 65px;
  position: relative;
  top: calc(50% - 35px);
}

.onboarding-text {
  position: relative;
  padding-top: 2%;
  width: 60%;
  left: 20%;
}

.onboarding-text p {
  font-size: 17px;
}

@keyframes pop {
  0% {
    color: #F44336;
    transform: scale(1);
  }
  
  50% {
    color: #ffffff;
    border-color: #F44336;
    background-color: #F44336;
    transform: scale(1.2);
  }
  
  100% {
    color: #ffffff;
    border-color: #F44336;
    background-color: #F44336;
    transform: scale(1);
  }
}

<div class="onboarding-flow mdl-grid">
  <div class="mdl-cell mdl-cell--4-col">
    <div class="circle circle-1">
      <i class="onboarding-icon material-icons">L</i>
    </div>
    <div class="onboarding-text">
      <p>Tell us your problem domain and we will customize our solution to meet your specific needs</p>
    </div>
  </div>
  <div class="mdl-cell mdl-cell--4-col">
    <div class="circle circle-2">
      <i class="onboarding-icon material-icons">G</i>
    </div>
    <div class="onboarding-text">
      <p>Engage your project stakeholders, end users without any time hassle to build together a clear product vision</p>
    </div>
  </div>
  <div class="mdl-cell mdl-cell--4-col">
    <div class="circle circle-3">
      <i class="onboarding-icon material-icons">T</i>
    </div>
    <div class="onboarding-text">
      <p>Benefit from our analytics to understand your users and their vision for the product. Build Personas to take best design decisions and streamline important product features </p>
    </div>
  </div>
</div>