Multi Color Text Blinker Using Pure CSS

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: 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;}  
} 
</style> 

Html

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

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.