Rainbow text

<style>
@-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;}
}
@-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;}
}
@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;}
}

/*PASTEL RAINBOW*/
@-webkit-keyframes pastelrainbow {
 0% {color: #ff9494; }
    16% {color: #ffbb94; }
    32% {color: #ffe194; }
    48% {color: #b1f2ba; }
    64% {color: #b8f5ff; }
    80% {color: #d8b8ff; }
    100% {color: #ffb8ee; }
}
@-ms-keyframes pastelrainbow {
 0% {color: #ff9494; }
    16% {color: #ffbb94; }
    32% {color: #ffe194; }
    48% {color: #b1f2ba; }
    64% {color: #b8f5ff; }
    80% {color: #d8b8ff; }
    100% {color: #ffb8ee; }
}
@-o-keyframes pastelrainbow {
 0% {color: #ff9494; }
    16% {color: #ffbb94; }
    32% {color: #ffe194; }
    48% {color: #b1f2ba; }
    64% {color: #b8f5ff; }
    80% {color: #d8b8ff; }
    100% {color: #ffb8ee; }
}
@keyframes pastelrainbow {
 0% {color: #ff9494; }
    16% {color: #ffbb94; }
    32% {color: #ffe194; }
    48% {color: #b1f2ba; }
    64% {color: #b8f5ff; }
    80% {color: #d8b8ff; }
    100% {color: #ffb8ee; }
}
#different {
animation:pastelrainbow 2s infinite;
font-weight: bold;
font-size: 2em;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0;
}
#head {
animation: rainbow 2s infinite;
font-weight: bold;
font-size: 2em;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0;
}
</style>
<div id="different">DIFFERENT IN THE HEAD</div>
<p></p>
<div id="head">DIFFERENT IN THE HEAD</div>