CSS3 incluye una nueva característica para manejo de animaciones usando únicamente hojas de estilos, con las propiedades transition
Para animar la transformación de un objeto en HTML se usaba JavaScript, haciendo que las propiedades del objeto cambiaran gradualmente de un valor origen a un valor destino.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Página de prueba</title>
<style>
#div1{
background-color:red;
width:20px;
height:20px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
Usando jQuery, por ejemplo, podemos hacer esto para animar un objeto:
<script src="jquery.js"></script>
<script>
$(function(){
$('#div1').click(function(){
if($(this).height()===20)
$(this).animate({height:50},300);
else
$(this).animate({height:20},300);
});
});
</script>
La desventaja de usar JavaScript es que el navegador tiene que llevar un control de intervalos de tiempo que cubran la duración de la animación (0.3 segundos), y modificar el tamaño gradualmente en cada uno de esos intervalos, lo cual la provoca que la ejecución requiera más procesamiento para el navegador y para el equipo. No alcanzamos a notarlo con páginas de poco contenido, pero mientras más elementos tenga la página, puede ser más lento o no veríamos la animación con la suavidad que se supone que debe tener.
Las ventajas de la nueva versión de CSS es que la animación por medio de hojas de estilo la controla el navegador, no JavaScript, y los navegadores actuales (IE9, Firefox 4, Opera 11, Chrome 10 y Safari 5) utilizan los recursos disponibles en el sistema operativo para manejar estas animaciones, como lo puede ser la aceleración por hardware (tarjeta de video). Esto evita que la animación se ralentice, pues depende de la capacidad del equipo, no de JavaScript.
Lo que haríamos en la hoja de estilos es lo siguiente:
<style>
#div{
background-color:red;
width:20px;
height:20px;
transition-property{height};
transition-duration:.3s;
-webkit-transition-property{height};
-webkit-transition-duration:.3s;
-o-transition-property{height};
-o-transition-duration:.3s;
-moz-transition-property{height};
-moz-transition-duration:.3s;
}
</style>
Y en el script, únicamente cambiaríamos el tamaño, sin animación.
<script>
$(function(){
$('#div1').click(function(){
if($(this).height()===20)
$(this).height(50);
else
$(this).height(20);
});
});
</script>
Las propiedades transition-property y transition-duration indican respectivamente qué propiedad será modificada con animación y cuánto tiempo durará en hacer la transición. Las variaciones con prefijo -webkit-, -o- y -moz- son para navegadores específicos (Safari/Chrome, Opera y Firefox), que soportan las propiedades transition sólo con el prefijo de su navegador, ya que la propiedad no ha sido oficialmente publicada. Dicho de otro modo, las que no tienen el prefijo no las aplica ningún navegador actualmente, pero serán las oficiales, así que las definimos de una vez.
Los navegadores que no soportan transiciones CSS3 (como Internet Explorer en todas sus versiones), no verán ninguna animación, simplemente el cuadro cambiará su tamaño. Estos navegadores sí requieren algo como jQuery para ver las transiciones. jQuery nos ayudará a determinar si el navegador soporta estas propiedades.
Crearemos otra función de jQuery que devuelva un valor verdadero si el navegador soporta esta propiedad de CSS3.
function soportaPropiedad(tp){
// tp será un texto con el nombre de la propiedad CSS que
// queremos verificar. Para este ejemplo, estoy revisando la
// propiedad 'transition-property'
var p=document.createElement('p'); // creamos un elemento HTML
//para hacer la verificación
var v; // a esta variable le asignaremos el valor de la propiedad
// usando jQuery
v = $(p).css(tp);
if (v !== undefined && v !== null) return true;
// si la propiedad tiene un valor, significa que el navegador sí
// la soporta
// en caso de no ser soportada la propiedad, hacemos la misma
// verificación usando el prefijo de cada navegador
v = $(p).css('-moz-' + tp); // '-moz-transition-property'
if (v !== undefined && v !== null) return true;
v = $(p).css('-webkit' + tp); // '-webkit-transition-property'
if (v !== undefined && v !== null) return true;
v = $(p).css('-o-' + tp); // '-o-transition-property'
if (v !== undefined && v !== null) return true;
}
Y dependiendo si el navegador soporta o no transiciones, varía la función al hacer clic.
$(function(){
if (soportaPropiedad('transition-property')) {
$('#div1').click(function(){
if ($(this).height() === 20)
$(this).height(50);
else
$(this).height(20);
});
}else{
$('#div1').click(function(){
if($(this).height() === 20)
$(this).animate({height:50},300);
else
$(this).animate({height:20},300);
});
}
})
La animación, de una forma u otra, se realizará. A menos, claro, de que tengamos un navegador muuuy viejo que ni siquiera soporte jQuery.
Deployando .NET 