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?

You might be looking for stackoverflow.com/questions/18481550/… this — Alpesh Jikadra
– Alpesh Jikadra, Commented Jan 12, 2019 at 8:17

j.ian.le · Accepted Answer · 2019-01-12 08:18:59Z

2

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>

answered Jan 12, 2019 at 8:18

j.ian.le

2074 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

j.ian.le Over a year ago

@user10903858 it is, look carefully or just change the color.

Temani Afif · Accepted Answer · 2019-01-12 09:10:12Z

1

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>

edited Jan 12, 2019 at 9:10

answered Jan 12, 2019 at 8:42

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Collectives™ on Stack Overflow

Creating two different styles for two different blinking class in css

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related