CSSはアイコンの色を白から指定したものに変更します

Question

アイコンを持つ3つのdivがあります。これらの3つの区画は3つのオンボーディングステップのようなものですが、今では3つのアイコンのすべてに赤の色合いがあります。

私が達成したいのは、アイコンの色が、白または任意の適切な色から現在の赤の色に変わるはずですが、最初のアイコンが色が2番目と3番目に変わることです。

マイ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> 

と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; 
} 

どのように私はこれを達成することができますか？

私が試したもの：効果のためのモックアップで、次の

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

これは、色を変更しますが、順序

Answer 1

にここであなたが始めるためにCSSアニメーションだありません。それは完全にはありませんが、残りの部分を磨くことができるくらい近いところにあなたを連れていかなければなりません。

各.circleは同じアニメーションを使用し、animation-durationは各円ごとにオフセットされてオフセットされます。

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