SIMPLE CSS RAINBOW TEXT

SIMPLE CSS RAINBOW TEXT

https://codepen.io/cb_rn/pen/OVXXmj

<style>
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url('https://fonts.googleapis.com/css?family=Anton');

h1,h2{
  text-align:center;
}

h1{
  color:rgba(100, 50, 255, .8);
  font-family: 'Pacifico', cursive;
  color:#212121;
}
.rainbow {
  
   /* Font options */
  font-family: 'Pacifico', cursive;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size:40px;
  
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 3s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 3s infinite;
  
  /* Standar Syntax */
  animation: rainbow 3s infinite; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
	40%{color: yellow;}
	60%{color: green;}
	100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
	40%{color: yellow;}
	60%{color: green;}
	100%{color: orange;}
}

body{
  background-color:#607D8B;
}

.container{
  background-color:#E0F2F1;
  padding:10px;
  border:2px solid black;
  border-radius:15px;
}
</style>
<div class="container">
  <h1>SIMPLE CSS RAINBOW TEXT</h1>

<h2 class="rainbow">Rainbow Text</h2>
</div>