Hasta donde yo sé, las animaciones básicas no pueden animar propiedades CSS no numéricas.

Creo que podría hacer esto usando una función de paso y la transformación css3 apropiada para el navegador de los usuarios. La transformación CSS3 es un poco complicada para cubrir todos sus navegadores (IE6 necesita usar el filtro Matrix, por ejemplo).

EDITAR : aquí hay un ejemplo que funciona en navegadores webkit (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/

Si quisiera admitir solo IE9, podría usar transform en lugar de -webkit-transform , o -moz-transform sería compatible con FireFox.

El truco utilizado es animar una propiedad CSS que no nos importa ( text-indent ) y luego usar su valor en una función de paso para hacer la rotación:

 $('#foo').animate( .. step: function(now,fx) { $(this).css('-webkit-transform','rotate('+now+'deg)'); } ...

La respuesta de Ryley es excelente, pero tengo texto dentro del elemento. Para rotar el texto junto con todo lo demás, utilicé la propiedad border-spacing en lugar de text-indent.

Además, para aclarar un poco, en el estilo del elemento, establezca su valor inicial:

 #foo { border-spacing: 0px; }

Luego, en el fragmento animado, su valor final:

 $('#foo').animate({ borderSpacing: -90 }, { step: function(now,fx) { $(this).css('transform','rotate('+now+'deg)'); }, duration:'slow' },'linear');

En mi caso, gira 90 grados en sentido antihorario.

Aquí está la demostración en vivo .

En mi opinión, la animate de jQuery está un poco sobreutilizada, en comparación con la transition de CSS3, que realiza dicha animación en cualquier propiedad 2D o 3D. También me temo que dejarlo en manos del navegador y olvidar la capa llamada JavaScript podría conducir a un exceso de jugo de CPU , especialmente, cuando desea explotar con las animaciones. Por lo tanto, me gusta tener animaciones donde están las definiciones de estilo, ya que defines la funcionalidad con JavaScript . Cuanta más presentación inyecte en JavaScript, más problemas enfrentará más adelante.

Todo lo que tiene que hacer es usar addClass para el elemento que desea animar, donde establece una clase que tiene propiedades de transition CSS. Simplemente "activa" la animación , que permanece implementada en la capa de presentación pura .

.js

 // with jQuery $("#element").addClass("Animate"); // without jQuery library document.getElementById("element").className += "Animate";

Uno podría eliminar fácilmente una clase con jQuery o eliminar una clase sin biblioteca .

.css

 #element{ color : white; } #element.Animate{ transition : .4s linear; color : red; /** * Not that ugly as the JavaScript approach. * Easy to maintain, the most portable solution. */ -webkit-transform : rotate(90deg); }

.html

 <span id="element"> Text </span>

Esta es una solución rápida y conveniente para la mayoría de los casos de uso.

También uso esto cuando quiero implementar un estilo diferente (propiedades CSS alternativas) y deseo cambiar el estilo sobre la marcha con una animación global .5s. Agrego una nueva clase al BODY , mientras tengo CSS alternativo en una forma como esta:

.js

 $("BODY").addClass("Alternative");

.css

 BODY.Alternative #element{ color : blue; transition : .5s linear; }

De esta manera, puede aplicar diferentes estilos con animaciones, sin cargar diferentes archivos CSS. Solo involucra JavaScript para establecer una class .