Techumber
Home Blog Work

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