Techumber

Multi Color Text Blinker Using Pure CSS

Github avatar
Dimpu
December 07, 2012. 2 min read

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. Multiple Color Text Blinker Effect Using Pure CSS Demo

Techumber.com CSS

<style>

.blinker{
font-family: muliundefinedarialundefinedsans-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 9undefined10*/
@-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;}
}
</style>

Html

<div class="blinker">Techumber.com</div>

...