How to create blinking text using CSS?

Blinking text is used to attract the user’s eyes. That’s why blinking text is mostly seen in advertising. Sometimes important message can also flag using blinking text.

HTML have <blink> tag, also there is text-decoration:blink property in CSS. But they are not working, hence we need to change the opacity in frequently to hide and show the text. For that we need animation.

Following example will help to create blinking text using CSS.

<html>
<head>
<style>
h2{
-webkit-animation-name: blinktext; /* Chrome, Safari, Opera */
-webkit-animation-duration: 0.4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite;/* Chrome, Safari, Opera */
animation-name: blinktext;
animation-duration: 0.4s;
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes blinktext {
from {opacity:0;}
to {opacity: 1;}
}
/* Standard syntax */
@keyframes blinktext {
from {opacity:0;}
to {opacity: 1;}
}
</style>
</head>

<body>
<h2>blinking text</h2>
</body>
</html>

blinking-text output

Comments

comments