JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

Este <span class="rainbow">texto</span> vai ficar trocando de cor;

CSS

@-webkit-keyframes rainbow {
  0% {color: #3498db}
  25% {color: #c0392b}
  50% {color: #8e44ad}
  75% {color: #f1c40f}
  100% {color: #e74c3c}
}

@-moz-keyframes rainbow {
  0% {color: #3498db}
  25% {color: #c0392b}
  50% {color: #8e44ad}
  75% {color: #f1c40f}
  100% {color: #e74c3c}
}

@-o-keyframes rainbow {
  0% {color: #3498db}
  25% {color: #c0392b}
  50% {color: #8e44ad}
  75% {color: #f1c40f}
  100% {color: #e74c3c}
}

@keyframes rainbow {
  0% {color: #3498db}
  25% {color: #c0392b}
  50% {color: #8e44ad}
  75% {color: #f1c40f}
  100% {color: #e74c3c}
}

.rainbow {
  color: #1abc9c;
  -webkit-animation: rainbow 5s alternate infinite;
     -moz-animation: rainbow 5s alternate infinite;
	   -o-animation: rainbow 5s alternate infinite;
  		  animation: rainbow 5s alternate infinite;
}