CODEWITHSUNDEEP
jqueryhtmlcss
perseusraz
perseusraz

Reputation: 89

Static background color with blinking font

I am trying to get text to blink with a static colored background, however both the red background AND the text are blinking. The old <blink> </blink> tags no longer work. I've been going off some existing CSS code I found, here's what I have:

<style type "text/css">
<!--
/* @group Blink */
.blink {
                -webkit-animation: blink .75s linear infinite;
                -moz-animation: blink .75s linear infinite;
                -ms-animation: blink .75s linear infinite;
                -o-animation: blink .75s linear infinite;
                animation: blink .75s linear infinite;
}
@-webkit-keyframes blink {
                0% { opacity: 1; }
                50% { opacity: 1; }
                50.01% { opacity: 0; }
                100% { opacity: 0; }
}
@-moz-keyframes blink {
                0% { opacity: 1; }
                50% { opacity: 1; }
                50.01% { opacity: 0; }
                100% { opacity: 0; }
}
@-ms-keyframes blink {
                0% { opacity: 1; }
                50% { opacity: 1; }
                50.01% { opacity: 0; }
                100% { opacity: 0; }
}
@-o-keyframes blink {
                0% { opacity: 1; }
                50% { opacity: 1; }
                50.01% { opacity: 0; }
                100% { opacity: 0; }
}
@keyframes blink {
                0% { opacity: 1; }
                50% { opacity: 1; }
                50.01% { opacity: 0; }
                100% { opacity: 0; }
}
/* @end */
-->
</style>
<p style="font-family:Courier; color:white; font-size: 20px; background-color: #660E0E"><p class="tab blink">This is an example of blinking text using CSS.</p>

Upvotes: 1

Views: 129

Answers (1)

Benneb10
Benneb10

Reputation: 1489

The css you have works fine, it's your html that is off. You'll want the p tag to be wrapped inside a div or similar container. It looks like you have a p inside of another p which doesn't work. Try this:

<div style="font-family:Courier; color:white; font-size: 20px; background-color: #660E0E">
    <p class="tab blink">This is an example of blinking text using CSS.</p>
</div>

Upvotes: 2

Related Questions