Tome la idea de Bonex de hacerlo con Animation.
Con Animation pasa lo mismo que con Transition. Si ponemos que valla de 0° a 300°, simplemente "girara" -60°.
La ventaja de Animation es que podemos poner Keyframes. Con estos "le podemos indicar" en que dirección ir.
Use un Keyframe para indicarle cada uno de los colores; Red(0°), Yellow(60°), Green(120°), Cyan(180°), Blue(240°), Magenta(300°) y Red(359°). Así me aseguro de que gire los 360°.
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Colores HSL</title>
<style type="text/css">
@-moz-keyframes colores {
0% { color: hsl(0, 100%, 50%); } /* Red */
16% { color: hsl(60, 100%, 50%); } /* Yellow */
33% { color: hsl(120, 100%, 50%); } /* Green */
50% { color: hsl(180, 100%, 50%); } /* Cyan */
66% { color: hsl(240, 100%, 50%); } /* Blue */
83% { color: hsl(300, 100%, 50%); } /* Magenta */
100%{ color: hsl(359, 100%, 50%); } /* Red */
}
h1 { color: hsl(1, 100%, 50%); }
h1:hover { -moz-animation: colores 36s linear 1; }
</style>
</head>
<body>
<h1>FOROS DEL WEB</h1>
</body>
</html> Al final creo que no es exactamente lo que estabas buscando, pero me sirvio de ejercicio
Saludos