How can I blink background only instead of text

Question

I just need to blink the background color only, not the Text. And I am unable to do that. I need your help.

.blink{
        width:200px;
        height: 50px;
            background-color: magenta;
        padding: 15px;  
        text-align: center;
        line-height: 50px;
    }
.text{
        font-size: 25px;
        font-family: cursive;
        color: white;
        animation: blink 1s linear infinite;
    }
@keyframes blink{
0%{opacity: 0;}
25%{opacity: .5;}
50%{opacity: 1;}
75%{opacity: .5;}
100%{opacity: 0;}
}

<div class="blink">
  <span class="text">blinking text</span></div>

@Sfili_81: OP must be mentioning about making the bg blink with the text intact — naveen, Jan 18 '21 at 07:38

score 5 · Accepted Answer · edited Jan 18 '21 at 07:49

You actually added the animation property in the text class instead of the blink. Just shift it.

Also, if you're animating the opacity then the content inside the div will also fade. Considering that you only wish to animate the background, animate the background-color instead.

.blink{
        width:200px;
        height: 50px;
        background-color: magenta;
        padding: 15px;  
        text-align: center;
        line-height: 50px;
        animation: blink 1s linear infinite;
    }
.text {
        font-size: 25px;
        font-family: cursive;
        color: black;
}
    
@keyframes blink {
  0%{background-color: magenta;}
  50%{background-color: white;}
  100%{background-color: magenta;}
}

<div class="blink">
  <span class="text">blinking text</span>
</div>

And let me know How can I close this Question. – Ahmad Shah Jan 18 '21 at 07:49 — Ahmad Shah, Jan 18 '21 at 07:49

score 1 · Answer 2 · answered Jan 18 '21 at 07:38

Instead of this:

.blink{
        width:200px;
        height: 50px;
            background-color: magenta;
        padding: 15px;  
        text-align: center;
        line-height: 50px;
    }
.text{
        font-size: 25px;
        font-family: cursive;
        color: white;
        animation: blink 1s linear infinite;
    }
@keyframes blink{
0%{opacity: 0;}
25%{opacity: .5;}
50%{opacity: 1;}
75%{opacity: .5;}
100%{opacity: 0;}
}

<div class="blink">
  <span class="text">blinking text</span></div>

Do this:

.blink{
        width:200px;
        height: 50px;
            background-color: magenta;
        padding: 15px;  
        text-align: center;
        line-height: 50px;
        animation: blink 1s linear infinite;
    }
.text{
        font-size: 25px;
        font-family: cursive;
        color: white;
    }
@keyframes blink{
0%{opacity: 0;}
25%{opacity: .5;}
50%{opacity: 1;}
75%{opacity: .5;}
100%{opacity: 0;}
}

<div class="blink">
  <span class="text">blinking text</span></div>

Thanks for the help D-Waqas, But I want the text to be stable. Only Background to blink. — Ahmad Shah, Jan 18 '21 at 07:44

How can I blink background only instead of text

2 Answers2