Follow Me:

Friday, 30 May 2014

How to blink text in html for various browsers

The blink() method is not standard, and may not work as expected in all browsers.
The blink() method is used to display a blinking string.
This method returns the string embedded in the <blink> tag, like this:

<blink>string</blink>



Note:  The blink() method only works in Opera. It is not supported in Internet Explorer, Firefox, Chrome, or Safari.

So alternatively we can try this below:

<span class="blink_text">India's Largest portal is Meetcity.in</span> 
<style type="text/css"> 
.blink_text { 

        -webkit-animation-name: blinker;
 -webkit-animation-duration: 1s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-iteration-count: infinite;

 -moz-animation-name: blinker;
 -moz-animation-duration: 1s;
 -moz-animation-timing-function: linear;
 -moz-animation-iteration-count: infinite;
 animation-name: blinker;
 animation-duration: 1s;
 animation-timing-function: linear; 
    animation-iteration-count: infinite; color: red; 
} 

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; } 
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; } 
} 

@keyframes blinker {  
    0% { opacity: 1.0; } 
    50% { opacity: 0.0; }      
    100% { opacity: 1.0; } 
} 
</style> 


11 comments:

  1. not working in IE11

    ReplyDelete
  2. Works absolutely 100%. Thank you very much!

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. Great! its works :)
    thank you for sharing

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. it works perfectly fine

    ReplyDelete