Menu
I want to make a blinking text.
First I tried the <blink> HTML tag, but it is only supported in Mozilla Firefox.
Then I tried CSS:
<style>
.blink {text-decoration: blink; }
</style>
It's not working on IE 6.
Then I tried javascript:
<script type="text/javascript">
function doBlink() {
// Blink, Blink, Blink...
var blink = document.all.tags("BLINK")
for (var i=0; i < blink.length; i++)
blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : ""
}
function startBlink() {
if (document.all)
setInterval("doBlink()",500)
}
window.onload = startBlink;
</script>
Now it's not working on Safari or Chrome.
Can anybody help me use blinking text which will run on all the different popular browsers? (IE 6, Mozilla Firefox, Google Chrome Safari, Opera.)
685
<blink>: The Blinking Text element Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.
The HTML <blink> tag is used to create a blinking text that flashes slowly. It has been obsolete all told fashionable browsers whereas some browsers never supported it in the least. This tag was also never standardized by hypertext mark-up language.
The blink tag ( <blink> ) is an obsolete HTML tag that makes the content of that tag slowly flash. This, along with some other obsolete tags like the marquee tag ( <marquee> ), were an easy way to add simple animation effects to your site.
This can be achieved with CSS3 like so
@-webkit-keyframes blink {
from {
opacity: 1.0;
}
to {
opacity: 0.0;
}
}
blink {
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
-webkit-animation-duration: 1s;
}
It even has a nice fade effect. Works fine in Safari, but Chrome cries a little on the inside.
159
The truly cross browser / legacy browser blink tag...
HTML
<!DOCTYPE html>
<html>
<blink>ULTIMATE BLINK TAG!</blink>
<!--[if lt IE 10]>
<script>
toggleItem = function(){
var el = document.getElementsByTagName('blink')[0];
if (el.style.display === 'block') {
el.style.display = 'none';
} else {
el.style.display = 'block';
}
}
setInterval(toggleItem, 1000);
</script>
<![endif]-->
</html>
CSS
blink {
-webkit-animation: blink 1s steps(5, start) infinite;
-moz-animation: blink 1s steps(5, start) infinite;
-o-animation: blink 1s steps(5, start) infinite;
animation: blink 1s steps(5, start) infinite;
}
@-webkit-keyframes blink {
to { visibility: hidden; }
}
@-moz-keyframes blink {
to { visibility: hidden; }
}
@-o-keyframes blink {
to { visibility: hidden; }
}
@keyframes blink {
to { visibility: hidden; }
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
