Creating two different styles for two different blinking class in css

Question

I want to make two different styles for two blinking class using html and css. My sample code is as follows:

.blinking{
    animation:blinkingText 0.8s infinite;
}
.blinking2{
    animation:blinkingText 0.8s infinite;
}
@keyframes blinkingText{
    0%{ color: #000;    }
    49%{    color: red; }
    50%{    color: red; }
    99%{    color: red; }
    100%{   color: #000;    }
}

<span class="blinking">Am I blinking?</span><br/>
<span class="blinking2">Am I blinking?</span>

I want to make blinking2 class yellow colored. is there any way to achiive this?

Answer 1

You can use another keyframe for the other blinkingText(yellow).

Try this:

.blinking{
    animation:blinkingText 0.8s infinite;
}
.blinking2{
    animation:blinkingText2 0.8s infinite;
}
@keyframes blinkingText{
    0%{ color: #000;    }
    49%{    color: red; }
    50%{    color: red; }
    99%{    color: red; }
    100%{   color: #000;    }
}
@keyframes blinkingText2{
    0%{ color: #000;    }
    49%{    color: yellow; }
    50%{    color: yellow; }
    99%{    color: yellow; }
    100%{   color: #000;    }
}

<span class="blinking">Am I blinking?</span><br/>
<span class="blinking2">Am I blinking?</span>

Answer 2

Use CSS variables and you will only need one keyframe:

.blinking{
    animation:blinkingText 1s infinite;
}
.yellow{
    --c:yellow;
}
@keyframes blinkingText{
    0%{ color: #000;    }
    49%{    color: var(--c,lightblue); }
    50%{    color: var(--c,lightblue); }
    99%{    color: var(--c,lightblue); }
    100%{   color: #000;    }
}

<span class="blinking">Am I blinking?</span><br>
<span class="blinking yellow">Am I blinking?</span><br>
<span class="blinking" style="--c:lightgreen">Am I blinking?</span>