3.2. Setting Text to Blink
Problem
You want to set text to blink in a web page.
Solution
The first part includes the blink
JavaScript
function:
function blinky(delay){ var el = document.body.getElementsByTagName('SPAN'); for (var i = 0; i < el.length; i++){ if (el[i].className == 'blink'){ el[i].style.visibility = el[i].style.visibility == 'hidden' ? 'visible' : 'hidden'; } } setTimeout('blinky(' + delay + ')', delay); }
In the body
element, place the
onload
event to execute the function when the
document has fully loaded:
<body onload="blinky(1000);">
Then wrap a span
element with the
class
attribute set to blink
around the text you want to animate:
<span class="blink">Hello, world!</span>
Discussion
The blink
value for the
text-decoration
property shares an unusual
distinction with other text-decoration
values:
browsers don’t need to support
blink
to be standards-compliant in terms of
support for this CSS property. If the browser engineers want to
support it, that’s OK, and if they
don’t, that’s OK as well.
Web developer Dan Thomas from the Babble List (http://www.babblelist.com/) created this
standards-based solution to give blink functionality without
requiring that the browser support the blink
property. Note that this workaround requires JavaScript, so the
function will not work if the user has JavaScript turned off in her
browser preferences.
See Also
The CSS 2.1 specification for the text-decoration
property at http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration; the CSS 2.1 ...
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.