Benjamin Lewis Benjamin Lewis - 5 months ago 23
CSS Question

Colour changing text

Is it possible to have text that changes colour (Constantly, not on refresh) just using HTML,PHP and CSS? If not, how would I do it?

I haven't been able to find anything like it anywhere else

Answer

Using CSS animations you can make text change colours. This example gives the text a rainbow animation.

HTML:

.rainbow {
  -webkit-animation: rainbow 1s infinite;
  -mos-animation: rainbow 1s infinite;
  -ms-animation: rainbow 1s infinite;
  -o-animation: rainbow 1s infinite;
  animation: rainbow 1s infinite;
}

@keyframes rainbow {
  0% {color: #FF0000;}
  10% {color: #FF8000;}
  20% {color: #FFFF00;}
  30% {color: #80FF00;}
  40% {color: #00FF00;}
  50% {color: #00FF80;}
  60% {color: #00FFFF;}
  70% {color: #0080FF;}
  80% {color: #0000FF;}
  90% {color: #8000FF;}
  100% {color: #FF0080;}
}

@-webkit-keyframes rainbow {
  0% {color: #FF0000;}
  10% {color: #FF8000;}
  20% {color: #FFFF00;}
  30% {color: #80FF00;}
  40% {color: #00FF00;}
  50% {color: #00FF80;}
  60% {color: #00FFFF;}
  70% {color: #0080FF;}
  80% {color: #0000FF;}
  90% {color: #8000FF;}
  100% {color: #FF0080;}
}

@-mos-keyframes rainbow {
  0% {color: #FF0000;}
  10% {color: #FF8000;}
  20% {color: #FFFF00;}
  30% {color: #80FF00;}
  40% {color: #00FF00;}
  50% {color: #00FF80;}
  60% {color: #00FFFF;}
  70% {color: #0080FF;}
  80% {color: #0000FF;}
  90% {color: #8000FF;}
  100% {color: #FF0080;}
}

@-ms-keyframes rainbow {
  0% {color: #FF0000;}
  10% {color: #FF8000;}
  20% {color: #FFFF00;}
  30% {color: #80FF00;}
  40% {color: #00FF00;}
  50% {color: #00FF80;}
  60% {color: #00FFFF;}
  70% {color: #0080FF;}
  80% {color: #0000FF;}
  90% {color: #8000FF;}
  100% {color: #FF0080;}
}

@-o-keyframes rainbow {
  0% {color: #FF0000;}
  10% {color: #FF8000;}
  20% {color: #FFFF00;}
  30% {color: #80FF00;}
  40% {color: #00FF00;}
  50% {color: #00FF80;}
  60% {color: #00FFFF;}
  70% {color: #0080FF;}
  80% {color: #0000FF;}
  90% {color: #8000FF;}
  100% {color: #FF0080;}
}
<div class="rainbow">rainbows are awesome</div>

Comments