Blink HTML text tag and its alternatives
The blinking text in HTML pages is probably one of the most paradoxical features of the web.
Being extremely popular among the webpage authors, at the same time it’s known as an extremely annoying among the users. "I won't deny the invention," Lou Montulli, the blink tag inventor, wrote in his blog, "but there is a bit more to the story than is widely known."
Being quite simple at first glance, it causes a lot of questions. “How to make blinking text in HTML?”, “Is the blink tag alive or dead?”, “How to blink a text without the blink tag?” Amazingly enough, people asked these questions during twenty years, and people keep asking them to this day.
The blink tag has a little bit curious history. Lou Montulli, a founding engineer at Netscape, accidentally invented it in 1994. "One of the engineers liked my idea so much that he left the bar sometime past midnight, returned to the office and implemented the blink tag overnight”, Lou recall, “I remember thinking that this would be a pretty harmless easter egg, that no one would really use it, but I was very wrong… Then somewhere, somehow the arcane knowledge of blinking leaked into the real world and suddenly everything was blinking. 'Look here', 'buy this', 'check this out', all blinking."
To blink or not to blink?
As far as I am concerned, an answer for this question is simple enough: "use, but not abuse". It’s absolutely no problem with the use of blinking text to direct the visitor’s attention to some important information on the page. However, we should keep in mind that excessive utilization of such methods may cause the counter effect. Trying to concentrate somebody on too many objects we just cause him to frustration and focus lost.
Taking in account these considerations, let’s get down to brass tacks and see how to make an HTML text blinking.
Don’t use the blink tag
Mozilla Developer Network published the following warning:
"This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future."
By the official HTML standard specification, browsers "must use the HTMLUnknownElement interface" if this tag occurs in HTML and all the modern browsers fulfill this recommendation.
To make a long story short, forget it. Fortunately, it is an excellent alternative - the CSS3 animations.
CSS animation fundamentals in short
A CSS animations technique is simple, but powerful. It makes possible to animate HTML element by defining the set of keyframes describing the start and end states of its CSS styles, as well as an intermediate waypoints along the way. Therefore, you can make the animations complicated enough without even having to know JavaScript. By the way, your animations will run well even on the relatively feeble systems because the browser can optimize the performance and efficiency. And, the last but not least, CSS animations are supported by all the modern browsers including the mobile versions.
To create a CSS animation sequence, first of all we style the HTML element we want to animate with the animation properties as following:
for example:
To see the full set of parameters refer this nice CSS3 Animations guide.
Then we define the animation sequence using keyframes for start, end and optionally intermediate states of the element styles. For example, the following set of keyframes quickly (in 20% of total animation time) moves an element from left to right and then slowly (in the rest 80% of total animation time) drives it back:
- 0% { left0 }
- 20% { left"200px" }
- 100% { left0 }
Pay attention the name of animation following the '@keyframe' keyword must be exactly the name you defined in the 'animation’ property of the CSS class.
Support for mobile devices
The above code will work fine with all the modern browsers on desktop computers, but on the mobile platforms the situation is different. The reason is that some mobile versions of browsers like Chrome and Safari don’t support the ‘animation’ and ‘@keyframes’ properties yet. However, they do support the CSS animations through the vendor-specific ‘–webkit-animation’ and ‘@-webkit-keyframes’. Therefore, to ensure that our animations will run on the mobile platforms as well, we need to add additional code, which should be exactly the same as a code above with the appropriate name changes:
and
- 0% { left0 }
- 20% { left200px }
- 100% { left0 }
Making a blinking text with CSS animations
It's a time to stop beating around the bush and start blinking our texts.
The blink tag simulation
As a start, let’s create a blinking text working exactly as through us use an old good blink tag, when and where it was supported. First of all we need a CSS class for our animated element in which we should define a property ‘animation’. Let’s give to both the class and the animation the same name ‘simple-blink-text’. The animation duration should be 1 second. To make the changes immediate, i.e. without any smooth transitions, we should use the timing function ‘step-start’, and to make our animation endless we should set the ‘iteration-count’ parameter to ‘infinite’. We also shouldn’t forget about the all platforms support. So, our CSS class looks as following:
- -webkit-animation simple-blink-text 1s step-start infinite;
- animation simple-blink-text 1s step-start infinite
Then we need to define the keyframes sequence. In the first keyframe we set the text color to black which makes it visible, then change it to transparent (ensuring that it won’t be visible on any background) for quarter a second and finally reset it back to black for the rest 75% of time:
- 0% { colorblack }
- 25% { colortransparent }
- 100% { colorblack }
- 0% { colorblack }
- 25% { colortransparent }
- 100% { colorblack }
Now we use the created CSS class in HTML
and voilà! The blinking text example is ready.
Play with animation keyframes
It wasn’t difficult, huh? Now let’s upgrade our example to something more dynamic. We’ll make a text blinking twice with a small interval. To avoid the confusing let’s also name our class ‘simple-blink-text’ instead of ‘double-blink-text’. We also prolong the animation time to two seconds:
- -webkit-animation dbl-blink-text 2s step-start infinite;
- animation dbl-blink-text 2s step-start infinite
Here we need six keyframes. Animation starts with the black color, after 0.2 seconds (10% of total animation time) it changes to red, then after 0.2 seconds more it changes back to black, repeat the cycle and then stay black until the end of animation (the rest 60% or 1.2 of second):
- 0% { colorblack }
- 10% { colorred }
- 20% { colorblack }
- 30% { colorred }
- 40% { colorblack }
- 100% { colorblack }
- 0% { colorblack }
- 10% { colorred }
- 20% { colorblack }
- 30% { colorred }
- 40% { colorblack }
- 100% { colorblack }
As usual, put it into the HTML
and it’s the animation:
Blinking text with a color
However, with CSS animations we can do more. To make our blinking more elegant, let’s ‘blink’ by changing the color from black to red and vice versa. Not less attracting the visitor’s attention, our text will look smoother and less annoying.
And only change we need to do in the previous example is to replace the color from ‘transparent’ to ‘red’ in the second keyframe definition. And also change the name of our class to ‘color-blink-text’, of course. So, the new CSS class is
- -webkit-animation color-blink-text 1s step-start infinite;
- animation color-blink-text 1s step-start infinite
and the keyframes definition is
- 0% { colorblack }
- 25% { colorred }
- 100% { colorblack }
- 0% { colorblack }
- 25% { colorred }
- 100% { colorblack }
Putting it into the HTML
we get the following result:
A glow text blinking
To top of it, we’ll make something really interesting and original. In the following example we’ll use a text-shadow trick for a text glowing effect. This time we name our element class ‘glow-blink-text’:
- -webkit-animation glow-blink-text 2s ease infinite;
- animation glow-blink-text 2s ease infinite
In the first and third frames of the animation the text color is black and the shadow is white, i.e. it looks like a normal text. In the second frame, however, we change the text color to white and make a thin black shadow around it. In result the text looks glowing. If you want to use this effect with a larger font size you can enlarge the shadow ‘spread’ parameter from 1 pixel to more.
Pay attention that the ‘timing-function’ property here is set to ‘ease’ instead of ‘linear’ in the previous examples. The difference between the two functions is that ‘ease’ smoothly animates the property from its start to end states, while ‘step-start’ only switches between them.
- 0% { colorblack; text-shadow0px 0px 1px white }
- 25% { colorwhite; text-shadow0px 0px 1px black }
- 100% { colorblack; text-shadow0px 0px 1px white }
- 0% { colorblack; text-shadow0px 0px 1px white }
- 25% { colorwhite; text-shadow0px 0px 1px black }
- 100% { colorblack; text-shadow0px 0px 1px white }
Exactly the same as the all previous examples, we use the CSS class with the HTML text element we want to ‘blink’
and see the result:
Conclusion
Although the ‘blink’ tag is dead, the CSS animations a technique provides us with even much more blinking possibilities than it did. Feel free use the above examples, or play with the CSS properties by yourself to invent more original methods of 'blinking' and 'winking' text for engaging you webpage visitors. Just don’t forget the sense of proportion!