Alternative for <Blink>

Alternative for blink

No there is not. Wikipedia has a nice article about this and provides an alternative using JavaScript and CSS: http://en.wikipedia.org/wiki/Blink_element

alternative to blink() method

Try this-:SOLUTION NO 1

You can create your own custom blink function.This can also be done by creating css class and adding them to our element.

function blink()
    {
        setInterval(function () {
            document.getElementById("blink").style.webkitTransitionDuration = "0.7s";
            document.getElementById("blink").style.opacity = 0;
            setTimeout(function () {
                document.getElementById("blink").style.webkitTransitionDuration = "0.7s";
                document.getElementById("blink").style.opacity = 1;
            }, 700);
        },1400);

    }

try this-->SOLUTION NO.2

JAVASCRIPT

function blink()
        {       
document.getElementById('blink').className = "animated blink_css";
        }

In css

.animated {
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
}

  @keyframes 'blink' {
   0% { background: rgba(255,0,0,0.5); }
   50% { background: rgba(255,0,0,0); }
   100% { background: rgba(255,0,0,0.5); 
}
//try moz for mozilla,o for opera and webkit for safari and chrome 
    .blink_css {
        -webkit-animation-name: blink;
        -moz-animation-name: blink;
        -o-animation-name: blink;
        animation-name: blink;
    }

Both of them will work.Tested!!!

What is the replacement for a blinking text in a web page?

Text that doesn't blink is a good alternative.

If you have to rely on blinking text or flashing images to get your users to look where you want, then your website probably has some serious design flaws. Here are some articles with some tips on good web design.

10 principles of effective web design
9 essential principles for good web design

knockout blinking elements - any alternative to style= display:none

Knockout adds a dynamic style display element when 'visible' is false and removes it when visible is true. That's why the display:none in css is kicking back in and your element is never shown.

You need to change it to a css binding like so

HTML

<p data-bind="text:userName, css:isDisplayed"></p>

CSS

p {
    width:1000px;
    height:1000px;
    background:green;
    display: none;
}

.shown{
    display: block;
}

KNOCKOUT

var vm = {
    userName:ko.observable('peter'),
    userLoggedIn:ko.observable(true) 
}

vm.isDisplayed = ko.computed(function(){
    return this.userLoggedIn() ? "shown" : "";
}, vm);

ko.applyBindings(vm)

note the computed function which adds the shown class to override the CSS.

Here's a fiddle
http://jsfiddle.net/Ky4EM/

Hope this helps

Imitating a blink tag with CSS3 animations

The original Netscape <blink> had an 80% duty cycle. This comes pretty close, although the real <blink> only affects text:

.blink {  animation: blink-animation 1s steps(5, start) infinite;  -webkit-animation: blink-animation 1s steps(5, start) infinite;}@keyframes blink-animation {  to {    visibility: hidden;  }}@-webkit-keyframes blink-animation {  to {    visibility: hidden;  }}

This is <span class="blink">blinking</span> text.

Blinking text cross browser

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.

blink tag in Internet Explorer

Avoid blinking, if possible - it annoys people.

But you can do it with JS/jQuery like this:

setInterval(jQuery('.blinking').toggle, 1500 );

That'll show/hide anything with the blinking class every 1.5 seconds.

So in the HTML you would do:

<span class="blinking">hello!</span>

But again, think very carefully about whether it should be blinking!

If you need something to specifically draw a user's attention (and for whatever reason regular emphasis/highlighting/etc isn't good enough), then instead of on-off blinking (where the text dissappears for half the time), consider changing the colour, or a blinking underline/border, or similar.

The key thing is, if something is important enough to visually annoy the user then it should remain readable.

How to make text blink on website?

You can do this pretty easily with CSS animations.

a {   
  animation-duration: 400ms;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

You can also extend it to change colors. With something like:

@keyframes blink {
  0% {
    opacity: 1;
    color: pink;
  }

  25% {
    color: green;
    opacity: 0;
  }

  50% {
    opacity: 1;
    color: blue;
  }

  75% {
   opacity: 0;
   color: orange;
 }

 100% {
   opacity: 1;
   color: pink;
 }
}

Make sure to add vendor prefixes

Demo: http://codepen.io/pstenstrm/pen/yKJoe

Update

To remove the fading effect you can do:

b {
  animation-duration: 1000ms;
  animation-name: tgle;
  animation-iteration-count: infinite;
}

@keyframes tgle {
  0% {
    opacity: 0;
  }

  49.99% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }

  99.99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

This is also a useful trick when animating image-sprites

How to make blinking/flashing text with CSS 3

You are first setting opacity: 1; and then you are ending it on 0, so it starts from 0% and ends on 100%, so instead just set opacity to 0 at 50% and the rest will take care of itself.

Demo

.blink_me {  animation: blinker 1s linear infinite;}
@keyframes blinker {  50% {    opacity: 0;  }}

<div class="blink_me">BLINK ME</div>

Text blinking jQuery

Try using this blink plugin

For Example

$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.

It is also a very simple plugin, and you could probably extend it to stop the animation and start it on demand.

Alternative for <Blink>