Introducción a las transiciones con CSS

JMiur

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?

Efecto Polaroid con CSS : Vagabundia

01 Sep 2010

Este demo de Zurb utiliza CSS para mostrar imágenes con un efecto tipo Polaroid y emplea transiciones que son propiedades que, por ahora, sólo son animadas en Safari y Chrome. En Firefox, veremos el efecto como una transición estática y ...

http://vagabundia.blogspot.com/

Breadcrumbs: Triángulos con CSS : Vagabundia

28 Feb 2011

Breadcrumbs: Triángulos con CSS. Recursos, trucos, plantillas y tutoriales para Blogger en español.

http://vagabundia.blogspot.com/

Transiciones en las imágenes

04 Mar 2008

Luego, donde deseamos que se muestre, creamos un bloque DIV que será el contenedor donde se verán las imágenes, que tendrá las propiedades CSS que nos gusten y donde, por defecto veremos la primera imagen de la serie: ...

http://vagabundia.blogspot.com/

Image Silider usando sólo CSS3 : Vagabundia

26 Jul 2010

Del mismo modo, el resultado en Firefox no es tan interesante como lo es en Chrome, Safari y Opera ya que habrá que esperar a que salga la version 3.7 para que las transiciones se vean animadas. ... Cualquier cosa, cualquier efecto, todo lo que se consiga con CSS tiene un valor incalculable así que guardaremos las ideas en el saco de la paciencia. Cualquier cosa, cualquier efecto, todo lo que se consiga con CSS tiene un valor incalculable así que guardaremos las ideas en ...

http://vagabundia.blogspot.com/

Un poco más sobre las transiciones con CSS : Vagabundia

hace 5 horas

Un poco más sobre las transiciones con CSS. Recursos, trucos, plantillas y tutoriales para Blogger en español.

http://vagabundia.blogspot.com/

Introducción a las transiciones con CSS : Vagabundia

29 Mar 2011

Introducción a las transiciones con CSS. Recursos, trucos, plantillas y tutoriales para Blogger en español.

http://vagabundia.blogspot.com/

Actualizar Firefox de manera segura : Vagabundia

25 Mar 2011

TRANSICIONES. Básicamente, hay tres tipos de datos que normalmente queremos mantener: los marcadores, los nombres de usuario y contraseñas de los distintos servicios y las extensiones. Si estamos utilizando Firefox Sync para sincronizar nuestra información, .... JMiurSi se trata de un post, puedes condicionar el CSS de este mo … JMiurLo que indica esta entrada se refiere al viejo sistema y por … JMiurTienes un error de sintaxis y debes quitar esas etiquetas. T … ...

http://vagabundia.blogspot.com/

Indice: HTMLCSS

01 Sep 2006

Textos degradados con CSS; Imágenes perdidas en IE; Ubicando elementos usando CSS [1][2][3]; Sombras en los textos usando CSS; Transiciones en las imágenes; El tamaño de los elementos en CSS; Las transparencias en los enlaces ...

http://vagabundia.blogspot.com/

Ejemplos de lo que viene : Vagabundia

29 Sep 2010

Lo que quise decir es que en Firefox se verá la transición pero, en Chrome, por ejemplo verás que esa transición es animada. Todas esas propiedades de animación son las que esperamos que sean las que se usará en la nueva versión de ...

http://vagabundia.blogspot.com/

Los filtros (sólo en IE) : Vagabundia

25 Nov 2008

Los filtros y transiciones son una propiedad CSS exclusiva de Internet Explorer y es una pena que no sea posible usarlos en otros navegadores así que, lo que sigue sólo es a título informativo y no recomiendo que se use así como tampoco ...

http://vagabundia.blogspot.com/

Precargar imágenes con CSS : Vagabundia

01 Oct 2007

Lo mas curioso es que esto lo encontré por tu post de transiciones y no porque lo haya buscado :P, bueno gracias por ayudar a los novatos como nosotros. Jmiur te quisiera hacer un par de preguntas, solo por curiosidad,contestalas si ...

http://vagabundia.blogspot.com/

Simple slideshow de imágenes con Scriptaculous : Vagabundia

01 Oct 2010

Este es un slideshow hiper-simple donde en pocas líneas se explica la forma de crear transiciones utilizando script.aculo.us y por lo tanto, pude servir de base para quien quiera experimentar con el tema. ..... Coloqué el codigo de las librerias debajo de < head>, Coloqué el script en sí encima de y seguido el CSS.. Y el codigo html lo coloqué en una "pagina estática".. No sé si el problema será que la pagina estática la tengo con un diseño distinto. ...

http://vagabundia.blogspot.com/