Text blink from one color to another css or jquery

Question

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.

http://stackoverflow.com/questions/1605698/text-blinking-jquery — ndpu, Mar 18 '14 at 20:31

LOTUSMS · Accepted Answer · 2014-03-19T13:18:50.390

20

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

edited Mar 19 '14 at 13:18

answered Mar 18 '14 at 20:35

LOTUSMS

10,317
15
71
140

1

Just fyi, it doesn't work in my up to date version of chrome without adding the vendor prefix `-webkit-`. You should probably mention that somewhere. – Robin Mar 18 '14 at 20:37
Yes, in chrome it does not work. – Za7pi Mar 19 '14 at 06:51
@onbermejo It does now. Perhaps you can close this question as an answer now? – LOTUSMS Mar 19 '14 at 13:19
1

And I know that it is horrible, but it has been imposible to change... Thank you again. ;) – Za7pi Mar 19 '14 at 18:52
1

this is "blink-fadeout" or "flashing" but not "blink" – Martin Schneider Feb 04 '18 at 12:26

score 3 · Answer 2 · edited May 23 '17 at 11:46

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;   
 }

Hello! Thanks. Do you know how could i do it infinite? – Za7pi Mar 19 '14 at 06:51 — Za7pi, Mar 19 '14 at 06:51

Text blink from one color to another css or jquery

2 Answers2