JMiur [E]

Las transiciones usando CSS son la parte interesante que trae Firefox 4 y que ya existía en otros navegadores como Chrome y Opera; de este modo, aún cuando en Internet Explorer no funcionen, el hecho que un 50% de los usuarios (o más, dependiendo de las estadísticas que se miren) utilicen estos navegadores ya nos permite jugar un poco con ellas.

De todos modos, como cualquier otro "efecto especial", bien puede armonizarse o utilizarse de manera sutil para que los visitantes puedan navegar correctamente aún cuando algunos de ellos no accedan a esas "modernidades".

Una transición es aquello que ocurre entre un momento y otro.

Estamos acostumbrado a ciertos efectos como el hover sobre un texto; es simple, ese texto tiene un color y cuando ponemos el cursor encima, el color cambia. Ha habido una "transición" pero, esta es instantánea; estas nuevas propiedades, entre otras cosas, nos permiten controlar el tiempo que durará ese cambio entre un estado y otro lo que generará una animación simple porque durante ese proceso, la propiedad o propiedades irán cambiando, yendo de un estado inicial a otro final.

Un ejemplo para no hacerse lio.




A la izquierda se ve el efecto hover normal; al poner el cursor encima, el color de fondo cambia de blanco a negro y en el de la derecha pasa lo mismo excepto que el tiempo que tarda es mayor y durante ese tiempo, ese color va virando lentamente mostrando tonos de gris.

La propiedad básica para conseguir esto se denomina transition pero los navegadores sólo la entienden si se utilizan sus prefijos así que tendremos tres versiones distintas que tienen el mismo nombre y la misma sintaxis pero que varían en ese prefijo:

-moz-transition en Firefox
-webkit-transition en Chrome y Safari
-o-transition en Opera

Por lo general, no suele usarse esa propiedad que es la forma resumida sino que se "divide" del mismo modo que lo hacemos con muchas otras. En este caso, son cuatro:

transition-property
transition-duration
transition-timing-function
transition-delay

Pero no hay que asustarse porque para los casos más simples basta usar las dos primeras.

¿Qué hacen? Voy a mostrarlas sin subfijos para no estar escribiendo mucho pero, hay que recordar que deben agregarse o no funcionarán.

transition-property es la que utilizamos para indicar cuál o cuales son las propiedades a cambiar; si son varias, las separamos con comas:
transition-property: color;
transition-property: color, opacity, width;
transition-duration es el tiempo que durará el efecto y también podemos colocar un solo valor o varios, separados por comas; si hacemos esto último, le estamos diciendo al navegador que cada propiedad indicada por transition-property tenga un tiempo de transicion distinto. En todos los casos, el valor está expresado en segundo:
transition-duration: 1s;
transition-duration: 1s, 4s;
Con esas ya podemos crear el efecto anterior que no es otra cosa que un efecto hover:
<style>
.demo {
background-color:#FFF;
-moz-transition-property: background-color;-moz-transition-duration: 2s;
-webkit-transition-property: background-color;-webkit-transition-duration: 2s;
-o-transition-property: background-color;-o-transition-duration: 2s;
}
.demo:hover {
background-color:#000;
-moz-transition-property: background-color;-moz-transition-duration: 2s;
-webkit-transition-property: background-color;-webkit-transition-duration: 2s;
-o-transition-property: background-color;-o-transition-duration: 2s;
}
</style>

<div class="demo"></div>
¿Por qué ponemos las transiciones en ambas reglas? Porque el efecto funcionará en ambos sentidos, se verá cuando colocamos el cursor encima y tambien cuando lo sacamos. Esto no es obligatorio, puede hacerse un efecto en un solo sentido sin problemas.

Las propiedades a las que podemos agregar efectos son muchas; en este ejemplo cambiamos el color de fondo y su ancho (width):


Casi todas las propiedades pueden sufrir efectos te transición: colores, fondos, bordes, tamaños, posiciones, fuentes, opacidad, sombras, márgenes, etc:

¿más?

22 comentarios:

Felipe  

Oh por Dios, que genialidad.
Uno se puede embobar un buen rato con estas cosas. :)

Responder
John Mistery Doe  

Me había fijado que en los botones de firefox 4 usaron este efecto y me preguntaba como se haría, quizás me anime y use este efecto. En IE se vería como un hover normal verdad?

Cada vez me gusta menos IE, Saludos.

Responder
Graciela  

Transicionar será muy divertido :D

Responder
Pablo  

Que buenos menús se pueden hacer con esto, de esos bien vistosos prescindiendo de un script.

Responder
Adrián J. Messina  

La magia del CSS, todo es posible y fascinante.
El mundo necesita un poco de CSS.

Responder
Echevarria  

Que grande eres!!!!

Responder
Gem@  

Que maravilla!!! ufff más cosas para probar no hay quien se resista :D

Responder
Bilosony2™  

Cada vez dejamos mas de lado a Jquery y scriptaculos :) Ya nos libraremos de ellos jeje
Voy a probar esto con los menus que traen sudmenus haber que efectos se le podra dar :D

Saludos!

Responder
m3nd3z  

Jmiur, olvidaste detallar algo:
Todas las propiedades se pueden agrupar en una sola:

-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;

Y en la propiedad :hover sólo se ponen los valores que uno va a cambiar, para no poner tantas propiedades.

Responder
JMiur  

Felipe:
Sí, así es. Puede ser adictivo :_)

John Mistery Doe:
Sí, en este caso, en IE se vería como un efecto normal sin la animación.

Graciela:
Transicionemos :D

Pablo:
Algo de esi hay, es una forma de evitar el uso de scripts para ciertas cosas.

Adrián J. Messina:
El mundo necesita un poco de CSS Buen lema :D

Gem@
Abrieron la puerta y es hora de jugar.

Bilosony2™:
Hasta cierto punto si aunque no se trata de librarse de nada sin ode amplair las opciones cosa que siempre es buena.

m3nd3z:
No, no me olvidé. Esta es mi forma de comenzar a mostrar las cosas.

Responder
m3nd3z  

Bueno, bueno. No discutiré con el que me enseñó la mayoría de lo que sé en cuestiones de CSS y HTML :D

Responder
JMiur  

No, no discuto en absoluto :D

Responder
luis portilla  

Gracias por el código esta genial.
Alguien sabe como aplicar este efecto al fondo, es decir al body.
intente con esto <body class="demo" pero no funciono.
Les agradecería mucho que me colaboraran.
luispor123@hotmail.com
luisalberpm@yahoo.es

Responder
JMiur  

Se usa del mismo moddo que con cualquier otra etiqueta.

Responder
Peter  

Hola Jmiur, precisamente ayer coloque transiciones en mi blog y hoy me di cuenta que no funciona en interet explorer... ¿habría alguna forma de arreglar el asunto?.. no se

Te agradezco mucho

JMiur  

Las transiciones; tal como dice la entrada, sólo funcionarán en Firefox, Chrome, Opera y en las versiones más recientes de IE como la 10 que aún está en modo beta.

Responder
May  

Excelente tuto JMiur, me viene de 10.
Saludos! :)

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Hola JMiur: Tengo una duda probé transiciones de Círculo Efectos Hover y en el blog de pruebas me quedaron estupendas,pero al ponerla en mi blog, np me aparece nada.¿Tendré algo Instalado que lo haga incompatible? y por eso no sale nada? En espera de tu contestación recibe un saludo

JMiur  

Tendría que ver tu ejemplo para responderte.

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Hola:Vaya rápido que eres respondiendo.Gracias
Mira mi blog de pruebas es este: http://ultreia5.blogspot.com.es/
El gadget con la Catedral que tengo a la drcha es el que quiero poner en mi blog. Pero no aparece nada.Lo quité todo por si es incompatible con las cosas que tengo y luego lo estropeo todo.
Un saludo gélido,ya nos llegó el frio,frio...Vosotros si que estais con sol eh?

JMiur  

Yo lo veo funcionando pero, no sé cuál e el modelo original que dices que funciona bien para compararlo.

Lo que si se ve es que dos reglas son erróneas porque indican direcciones url que no existen:

.ch-img-2 {background-image: url("../images/20.jpg");}
.ch-img-3 {background-image: url("../images/21.jpg");}

También se ven reglas repetidas como: .ch-item {}

Y no veo las reglas de estilo de .ch-grid{} .ch-grid li {} etc

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

OK! Muchas gracias

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR