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.
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.
The HTML <blink> tag is used to create a blinking text that flashes slowly.
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
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With