Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text blink from one color to another css or jquery [duplicate]

Tags:

jquery

css

blink

I would want to blink a text with two different colors:

For example: blinking a text white-green-white-green-white-green

I don't mind if jQuery or CSS.

like image 568
Za7pi Avatar asked Mar 18 '14 20:03

Za7pi


People also ask

How do I make text blink a different color in HTML?

Blinking text with multi colour using CSS Lets add multi colour for the blinking text using HTML and CSS. In the @keyframes rule, we need to specify the from color and to colour for multi colour blinking as below. The from colour given as yellow and to colour given as white.

How do I make my text blink?

The HTML <blink> tag is used to create a blinking text that flashes slowly.


2 Answers

Against my better judgement LOL...You will need to adjust for cross-browser compatibility with webkit, etc

EDITTED TO WORK WITH ALL BROWSERS

 <a href="#"> text</a>


 /* css */

 a {
   animation-duration: 400ms;
   animation-name: blink;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}
@keyframes blink {
   from {
      opacity: 1;
   }
   to {
      opacity: 0;
   }
 }

DEMO

like image 145
LOTUSMS Avatar answered Oct 22 '22 13:10

LOTUSMS


http://jsfiddle.net/8Xhzt/12/

no support for IE 9: animation-iteration-count
Note to support non-supporting current browsers you can use Modernizr: See How do I normalize CSS3 Transition functions across browsers? CSS3 animation-fill-mode polyfill

@-webkit-keyframes blink {
   from { color: green; }
   to { color: white; }
  }
 @-moz-keyframes blink {
   from { color: green; }
   to { color: white; }
 }
 @-ms-keyframes blink {
   from { color: green; }
   to { color: white; }
 }
 @-o-keyframes blink {
   from { color: green; }
   to { color: white; }
 }
 @keyframes blink {
   from { color: green; }
   to { color: white; }
 }

 .blink {
    color: green;
    -webkit-animation: blink 2s 3 alternate;
    -moz-animation: blink 2s 3 alternate;  
    -ms-animation: blink 2s 3 alternate;  
    -o-animation: blink 2s 3 alternate;  
    animation: blink 2s 3 alternate;   
 }
like image 26
JohanVdR Avatar answered Oct 22 '22 14:10

JohanVdR