The <blink> tag was never an official standard, and is now completely abandoned by all browsers.
Is there a standards compliant way of making text blink?
This question is related to
html
If you're looking to re-enable the blink tag for your own browsing, you can install this simple Chrome extension I wrote: https://github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension. It just hides and shows all <blink> tags on every page using setInterval.
can use this
@keyframes blinkingText
{
0%{ opacity: 1; }
40%{ opacity: 0; }
60%{ opacity: 0; }
100%{ opacity: 1; }
}
.blinking
{
animation:blinkingText 2s reverse infinite;
}
Here's some code that'll substitute for the blink tag
<p id="blink">This text will blink!</p>
<script>
var blacktime = 1000;
var whitetime = 1000;
//These can be as long as you desire in milliseconds
setTimeout(whiteFunc,blacktime);
function whiteFunc(){
document.getElementById("blink").style.color = "white";
setTimeout(blackFunc,whitetime);
}
function blackFunc(){
document.getElementById("blink").style.color = "black";
setTimeout(whiteFunc,blacktime);
}
</script>
A small javascript snippet to mimic the blink , no need of css even
<span id="lastDateBlinker">
Last Date for Participation : 30th July 2014
</span>
<script type="text/javascript">
function blinkLastDateSpan() {
if ($("#lastDateBlinker").css("visibility").toUpperCase() == "HIDDEN") {
$("#lastDateBlinker").css("visibility", "visible");
setTimeout(blinkLastDateSpan, 200);
} else {
$("#lastDateBlinker").css("visibility", "hidden");
setTimeout(blinkLastDateSpan, 200);
}
}
blinkLastDateSpan();
</script>
.blink_text {_x000D_
_x000D_
animation:1s blinker linear infinite;_x000D_
-webkit-animation:1s blinker linear infinite;_x000D_
-moz-animation:1s blinker linear infinite;_x000D_
_x000D_
color: red;_x000D_
}_x000D_
_x000D_
@-moz-keyframes blinker { _x000D_
0% { opacity: 1.0; }_x000D_
50% { opacity: 0.0; }_x000D_
100% { opacity: 1.0; }_x000D_
}_x000D_
_x000D_
@-webkit-keyframes blinker { _x000D_
0% { opacity: 1.0; }_x000D_
50% { opacity: 0.0; }_x000D_
100% { opacity: 1.0; }_x000D_
}_x000D_
_x000D_
@keyframes blinker { _x000D_
0% { opacity: 1.0; }_x000D_
50% { opacity: 0.0; }_x000D_
100% { opacity: 1.0; }_x000D_
} <span class="blink_text">India's Largest portal</span>Blinking text with HTML and CSS only
<span class="blinking">I am blinking!!!</span>
And Now CSS code
.blinking{
animation:blinkingText 0.8s infinite;
}
@keyframes blinkingText{
0%{ color: #000; }
49%{ color: transparent; }
50%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #000; }
}
No, there isn't in HTML. There is a good reason why the developers chose to go out of their way to remove support for an element whose implementation was otherwise untouched for upwards of a decade.
That said... you could emulate it using a CSS animation, but if I were you, I wouldn't risk CSS animations being axed due to being abused in this manner :)
The blink element is being abandoned by browsers: Firefox supported it up to version 22, and Opera up to version 12.
The HTML5 CR, which is the first draft specification that mentions blink, declares it as “obsolete” but describes (in the Rendering section) its “expected rendering” with the rule
blink { text-decoration: blink; }
and recommends that the element be replaced by the use of CSS. There are actually several alternative ways of emulating blink in CSS and JavaScript, but the rule mentioned is the most straightforward one: the value blink for text-decoration was defined specifically to provide a CSS counterpart to the blink element. However, support to it seems to be as limited as for the blink element.
If you really want to make content blink in a cross-browser way, you can use e.g. simple JavaScript code that changes content to invisible, back to visible etc. in a timed manner. For better results you could use CSS animations, with somewhat more limited browser support.
Here is a web-component that fits your need: blink-element.
You can simply wrap your content in <blink-element>.
<blink-element>
<!-- Blinking content goes here -->
</blink-element>
The solution below is interesting because it can be applied across multiple elements concomitantly and does not trigger an error when the element no longer exists on the page. The secret is that it is called passing as a parameter a function in which you must return the elements you want to be affected by the blink. Then this function is called back with each blink. HTML file below:
<!doctype>
<html>
<head>
<style>
.blink {color: red}
</style>
</head>
<body>
<h1>Blink test</h1>
<p>
Brazil elected President <span class="blink">Bolsonaro</span> because he
was the only candidate who did not promise <span class="blink">free things</span>
to the population. Previous politicians created an image that would
bring many benefits, but in the end, the state has been getting more and
more <span class="blink">burdened</span>. Brazil voted for the
realistic idea that <span class="blink">there is no free lunch</span>.
</p>
</body>
<script>
var blink =
{
interval_in_miliseconds:
400,
on:
true,
function_wich_returns_the_elements:
[],
activate:
function(function_wich_returns_the_elements)
{
this.function_wich_returns_the_elements = function_wich_returns_the_elements;
setInterval(blink.change, blink.interval_in_miliseconds);
},
change:
function()
{
blink.on = !blink.on;
var i, elements = [];
for (i in blink.function_wich_returns_the_elements)
{
elements = elements.concat(blink.function_wich_returns_the_elements[i]());
}
for (i in elements)
{
if (elements[i])
{
elements[i].style.opacity = blink.on ? 1 : .2;
}
}
}
};
blink.activate
(
[
function()
{
var
i,
node_collection = document.getElementsByClassName('blink'),
elements = [];
for (i = 0; i < node_collection.length; i++)
{
elements.push(node_collection[i]);
}
return elements;
}
]
);
</script>
</html>
You could take advantage of JavaScript's setInterval function:
const spanEl = document.querySelector('#spanEl');_x000D_
var interval = setInterval(function() {_x000D_
spanEl.style.visibility = spanEl.style.visibility === "hidden" ? 'visible' : 'hidden';_x000D_
}, 250);<span id="spanEl">This text will blink!</span>The blick tag is deprecated, and the effect is kind of old :) Current browsers don't support it anymore. Anyway, if you need the blinking effect, you should use javascript or CSS solutions.
CSS Solution
blink {_x000D_
animation: blinker 0.6s linear infinite;_x000D_
color: #1c87c9;_x000D_
}_x000D_
@keyframes blinker { _x000D_
50% { opacity: 0; }_x000D_
}_x000D_
.blink-one {_x000D_
animation: blinker-one 1s linear infinite;_x000D_
}_x000D_
@keyframes blinker-one { _x000D_
0% { opacity: 0; }_x000D_
}_x000D_
.blink-two {_x000D_
animation: blinker-two 1.4s linear infinite;_x000D_
}_x000D_
@keyframes blinker-two { _x000D_
100% { opacity: 0; }_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<title>Title of the document</title>_x000D_
</head>_x000D_
<body>_x000D_
<h3>_x000D_
<blink>Blinking text</blink>_x000D_
</h3>_x000D_
<span class="blink-one">CSS blinking effect for opacity starting with 0%</span>_x000D_
<p class="blink-two">CSS blinking effect for opacity starting with 100%</p>_x000D_
</body>_x000D_
</html>sourse: HTML blink Tag
Please try this one and I guarantee that it will work
<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 1000);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
Then put this below:
<blink><center> Your text here </blink></div>
Source: Stackoverflow.com