How To Create Flashing/Blinking Text With CSS3 Animations

How To Create Flashing/Blinking Text With CSS3 Animations

We used to have <blink> tag to create the flashing text effect on webpages. It is now deprecated, but good news is that we have CSS3 animations that can produce the same blinking text effect.

HTML For Flashing/Blinking Text

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

CSS For Flashing/Blinking Text

.blink {
    -webkit-animation: blink 1s step-end infinite;
            animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
        @keyframes blink { 50% { visibility: hidden; }}

The above CSS will blink the text at 1 second interval infinitely. You can play around with the CSS to change the look and feel of the flashing effect by clicking the View Demo button above. Below is the CSS to create a red text that will flash/blink at 2 seconds interval.

.blink {
    -webkit-animation: blink 2s step-end infinite;
            animation: blink 2s step-end infinite;
                color: #FF0000;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
        @keyframes blink { 50% { visibility: hidden; }}

Try it Yourself

All right guys, that’s all you need to creating flashing/blinking text with CSS3 animations.