Multi Color Text Blinker Using Pure CSS
Published on December 7, 2012
This is another css trick, by using this trick we can create blinking text very easily. In olden days we use JavaScript to get this kind of effect. But with help of css3 we can create it using css. So Lets jump in it. Demo
Techumber.com CSS
.blinker {
font-family: muli, arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #333;
animation: changecolor 5s infinite;
-moz-animation: changecolor 5s infinite;
-webkit-animation: changecolor 5s infinite;
-ms-animation: changecolor 5s infinite;
-o-animation: changecolor 5s infinite;
}
@keyframes changecolor {
0% {
color: red;
}
25% {
color: yellow;
}
50% {
color: blue;
}
100% {
color: green;
}
}
/* Mozilla Browser */
@-moz-keyframes changecolor {
0% {
color: red;
}
25% {
color: yellow;
}
50% {
color: blue;
}
100% {
color: green;
}
}
/* WebKit browser Safari and Chrome */
@-webkit-keyframes changecolor {
0% {
color: red;
}
25% {
color: yellow;
}
50% {
color: blue;
}
100% {
color: green;
}
}
/* IE 9,10*/
@-ms-keyframes changecolor {
0% {
color: red;
}
25% {
color: yellow;
}
50% {
color: blue;
}
100% {
color: green;
}
}
/* Opera Browser*/
@-o-keyframes changecolor {
0% {
color: red;
}
25% {
color: yellow;
}
50% {
color: blue;
}
100% {
color: green;
}
}
Html
<div class="blinker">Techumber.com</div>