Before 5 months, I wrote about a javascript function to make the border of an element blink infinite, using DOM. But, blinking an element’s border it’s also possible with CSS3 animation element, without any javascript usage.
At the stylesheet, just add a keyframe, setting the border-color property and timed at the 50% of the animation.
Also, at the blinking element class, use the animation property, with the keyframe above, the blinking duration you want, timing function at step-end, iteration count infinite and direction alternate.
Because of only prefixed CSS animation element support at the most browsers for the moment,
it’s highly recomended to use the -prefix-free script from Lea Verou, to write pure unprefixed CSS3 code and support all major browsers, until they closely aligned with the CSS3 standards.
For the moment, that support @keyframe and animation CSS elements (even in the prefixed format) are the latest versions of Firefox, Chrome and Safari.
The CSS code
@keyframes blink {
50% { border-color: #ff0000; }
}
table{ /*or other element you want*/
animation-name: blink ;
animation-duration: .5s ;
animation-timing-function: step-end ;
animation-iteration-count: infinite ;
animation-direction: alternate ;
}
The CSS with all animation properties combined at one line
@keyframes blink {
50% { border-color: #ff0000; }
}
table{ /*or other element you want*/
animation: blink .5s step-end infinite alternate;
}
And here is a live demo of the Amiga Guru Meditation message, using blink border at dabblet.com/gist/2694667