How to make blinking text using HTML and CSS

Posted on by

In many websites, we might have seen the blinking text that is used to get the visitors attention or announce the importance message. Examples : Offers and Discounts in e-commerce websites. Lets create the blinking text using HTML and CSS.

HTML code to assign blinking class

Here we are using the HTML span tag to give the blinking text. Then we have assigned the class name as blinking for this tag. Using the CSS code, we can define the style/animation properties for this text.

CSS code to add the animation and style properties

The @keyframes rule specifies the animation code for the blinking text. Inside this rule, we can specify the transparency of the text using opacity property.

For the blinking class. we have defined the style properties such as background colour, font properties, size of the text in the below code.

Example : Blinking text with single colour

Blinking text with single colour using HTML and CSS
Blinking text with single colour using HTML and CSS

Blinking text with multi colour using CSS

In the previous text, we have used single colour for blinking. Lets add multi colour for the blinking text using HTML and CSS. In the @keyframes rule, we need to specify the from color and to colour for multi colour blinking as below.

The from colour given as yellow and to colour given as white. Initially text will blink in the yellow colour and then it changed to white colour.

Output : Blinking text with multi colour

Text blinking from one to another using HTML and CSS
Text blinking from one to another using HTML and CSS

Complete HTML and CSS code for your reference

Recommended Articles