Vamos a poner el tema en contexto.
Hay una función CSS que aplica colores según una paleta que varía en tono, saturación y brillo. Es la
hsl(), y para entenderla hay que imaginar un círculo con radios sucesivos que degradan a través de todos los colores.
En este sitio hay una imagen con la descripción
http://demosthenes.info/blog/61/An-E...-Color-In-CSS3
Los valores de
saturation y
lightness se escriben en formato de porcentaje, de 0 a 100. Pero
hue es el que justifica el gráfico circular, porque se escribe en grados que van desde 0 hasta casi 360. Ya que a los 360° (como en cualquier circunsferencia) se vuelve a 0. En este caso, se vuelve al rojo del inicio.
Existe también en CSS 3 una animación de tipo script llamada
transition, que usa los valores
Código:
transition: [propiedad a cambiar], [duración de cambio en seg.], [modo de cambio];
Sirve -en principio- cuando tenemos propiedades asignadas a un elemento, y ante un (p.e.)
:hover les queremos cambiar los valores; pero de manera gradual, paso a paso desde los originales hasta los nuevos, asignando el tiempo entre ambos.
Esto funciona perfecto en valores lineales. Si tenemos una fuente de
10px y la queremos llevar a
50px en 4 segundos, el CSSscript la va a "agrandar" a diez pixeles por segundo.
¿Pero qué pasa con los valores angulares?.
El cálculo es más complejo. Porque es un número "cerrado", y cuando termina empieza de nuevo como si fuese un "lineal infinito".
El estandar CSS lo reconoce como tal. En el caso de
hue (primer valor de
hsl();) después de 359° vuelve a 0°, y por lo tanto acepta valores negativos, donde
-120 es igual a
240.
Pero
transition no lo entiende.
Debería hacerlo, y al final, no. Los navegadores convierten el formato a color decimal (o hexadecimal) y después hacen las cuentas de transición.
Así, convertido a lineal, no podemos hacer el efecto de "transición arcoiris", que es pasar un elemento por todos los colores desde 0° a 359°. Lo más que podemos llegar es a "180°".
Para entenderlo mejor, usemos un caso extremo : vayamos de
hsl(2, 100%, 50%) a
hsl(358, 100%, 50%). En vez de recorrer todo el espectro desde 2 hasta 358 en sentido horario, en la práctica va a tomar el camino corto, que sería el antihorario de solamente 4°. Y se vería siempre el mismo rojo (o casi).
Les dejo una herramienta que hice para ver los caminos que toman estos colores en un minuto, está hecha para Mozilla, por el tema de los prefijos
moz, pero si lo quieren probar con otros se los cambian.
Se inicia poniendo la manito (el puntero) sobre el título, y al sacarla se resetea. Hay una lista de colores de referencia y un escript para mostrar los valores que asigna cada segundo el CSS (es para FF y Chr, no sé Op). Ah!, y un relojito CSS para tomar el tiempo.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>TEXTO ARCOIRIS.</title>
<script type="text/javascript">
var cuenta;
function leer() {
clearTimeout(cuenta);
var texto = document.getElementsByTagName("h1")[0];
var colorTexto = document.defaultView.getComputedStyle(texto, null).getPropertyValue("color");
document.getElementById("lista").value += colorTexto +"\n";
cuenta = setTimeout(leer, 1000);
}
</script>
<style type="text/css">
body {font-size: 100%; background-color: silver; }
h1 {font: 900 5em/3em sans-serif; height: 2em; text-align:center; cursor: -moz-grab;
margin: -1em 0 0;
color: hsl(0, 100%, 50%); }
h1:hover { color: hsl(180, 100%, 50%);
-moz-transition: color 60s linear; }
#reloj {position: absolute; width: 1.2em; overflow: hidden; border: 1px solid black;
font: bold 0.6em/0.6em monospace; color: black; height: .7em; right: 10px; }
#cuenta {white-space: nowrap; margin-left: 0; background: lime; overflow: hidden;
color: black; padding-top: 0.12em; }
h3 , textarea {float: left; width: 45%; margin-right: 10px; }
h1:hover #cuenta{margin-left: -106em; -moz-transition: margin-left 60s linear; }
}
</style>
</head>
<body>
<h1 onmouseover="leer()" onmouseout="clearTimeout(cuenta)">FOROS DEL WEB
<div id=reloj><div id=cuenta>
00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
</div></div></h1>
<textarea id="lista" cols=50 rows=70></textarea>
<h3 style="color: hsl(0, 100%, 50%);" >0 FOROS DEL WEB -359</h3>
<h3 style="color: hsl(60, 100%, 50%);" >60 FOROS DEL WEB -300</h3>
<h3 style="color: hsl(120, 100%, 50%);" >120 FOROS DEL WEB -240</h3>
<h3 style="color: hsl(180, 100%, 50%);" >180 FOROS DEL WEB -180</h3>
<h3 style="color: hsl(240, 100%, 50%);" >240 FOROS DEL WEB -120</h3>
<h3 style="color: hsl(300, 100%, 50%);" >300 FOROS DEL WEB -60</h3>
<h3 style="color: hsl(359, 100%, 50%);" >359 FOROS DEL WEB 0</h3>
<input type=button value="BORRA LISTA COLORES."
onclick="document.getElementById('lista').value = ''" >
</body>
</html>
Ahora sí, la pregunta : ¿Hay alguna manera (aunque sea proyecto) de decirle a
transition en qué dirección moverse?. ¿O para hacer la transición "arcoiris" tenemos que morir en javascript?.
Gracias.
furoya