A CodePen by Jackie Balzer.

index.html

<h1>Coolest text on the internet</h1>  

style.scss

@import "compass";
.transitions-ready.color0 a  { color: hsl(  10, 90%, 60% ); }
.transitions-ready.color1 a  { color: hsl(  30, 90%, 60% ); }
.transitions-ready.color2 a  { color: hsl(  50, 90%, 60% ); }
.transitions-ready.color3 a  { color: hsl(  70, 90%, 60% ); }
.transitions-ready.color4 a  { color: hsl(  90, 90%, 60% ); }
.transitions-ready.color5 a  { color: hsl( 110, 90%, 60% ); }
.transitions-ready.color6 a  { color: hsl( 130, 90%, 60% ); }
.transitions-ready.color7 a  { color: hsl( 150, 90%, 60% ); }
.transitions-ready.color8 a  { color: hsl( 170, 90%, 60% ); }
.transitions-ready.color9 a  { color: hsl( 190, 90%, 60% ); }
.transitions-ready.color10 a { color: hsl( 210, 90%, 60% ); }
.transitions-ready.color11 a { color: hsl( 230, 90%, 60% ); }
.transitions-ready.color12 a { color: hsl( 250, 90%, 60% ); }
.transitions-ready.color13 a { color: hsl( 270, 90%, 60% ); }
.transitions-ready.color14 a { color: hsl( 290, 90%, 60% ); }
.transitions-ready.color15 a { color: hsl( 310, 90%, 60% ); }
.transitions-ready.color16 a { color: hsl( 330, 90%, 60% ); }
.transitions-ready.color17 a { color: hsl( 350, 90%, 60% ); }

@mixin colors {
  
  $h: 10;
  
  @for $i from 1 through 18 {
    
    $percent: ($i * 10) + '%';
    
    #{$percent} {
      color: hsl( $h, 90%, 60%);
    }
    
    $h: $h + 20;
    
  } // @for
    
} // @mixin colors

@-moz-keyframes colors {
  @include colors;
}

@-webkit-keyframes colors {
  @include colors;
}

html {
  background: #1d1d1d;
}

h1 {
  font-family: normal 'Helvetica Neue', sans-serif;
  text-align: center;
  -webkit-animation: colors 60s linear infinite;
     -moz-animation: colors 60s linear infinite;
}