This effect is ideal for creating an eye catching text heading and is quite simple to acheive with just a bit of CSS, or it could be used as a mouseover effect with a bit of a tweak to the code.

You can view an example here

The CSS

.gradient-text{
     font-size: 3rem;
     font-weight: 700;
     text-align:center;
     background: linear-gradient(to right, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
     background-size: 200% 200%;
     animation: rainbow 4s ease-in-out infinite;
     background-clip: text;
     -webkit-background-clip:text;
     color:rgba(0,0,0,0);
}
@keyframes rainbow { 
     0%{background-position:left}
     50%{background-position:right}
     100%{background-position:left}
}

The HTML

<div class="container">
     <p class="gradient-text">Animated text gradient with CSS</p>
</div>