Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

Animación en CSS3 IV

Transiciones

Concepto de transición

Una transición es un cambio progresivo de un elemento. Aplicado a los estilos CSS significa que dentro de una propiedad, para pasar de un valor a otro, esto se puede hacer de manera progresiva, pasando por los valores intermedios.

Esto la mayoría de las veces provoca un efecto de animación, sobre todo en propiedades que tienen que ver con el tamaño, la posición o el color.

Las transiciones sólo se dan en las propiedes CSS cuyo valor tenga un componente númerico (número, medidas, colores, tiempo).

Las transiciones en CSS3 son creadas por una serie de propiedades que controlarán los elementos, las propiedades CSS y el tiempo entre otras cosas.

Cambio de valor en propiedades

Sin embargo lo primero que es necesario para que haya una transición es un cambio de valor en una propiedad. Esto lo podemos hacer mediante javascript o también mediante la pseudoclase :hover.

Dejamos javascript para más adelante, y vamos a hacer los próximos ejemplos con la pseudoclase :hover. Aunque se emplea preferentemente en los enlaces, esta pseudoclase no es exclusiva de ellos, y puede aplicarse a cualquier elemento.

Al aplicar la pseudoclase hover a cualquier elemento, ésta hace que el elemento cambie cuando se le pasa el ratón por encima. El cambio se produce de manera instantánea, sin embargo si aplicamos una transición, el cambio será progresivo.

Propiedades de transformación.

En CSS3 tenemos una serie de propiedades que aplicadas a un elemento hacen que una o varias propiedades de éste cuando cambien lo hagan en forma de transición.

NAVEGADORES : Estas propiedades funcionan sólo de forma experimental en algunos navegadores, por lo que deberemos repetirlas con su correspondiente prefijo de navegador:

En Internet Explorer no funcionan estas propiedades.

Propiedad transition-property

La propiedad transition-property indica a qué propiedades CSS deben aplicarseles las transiciones.

transition-property: none | all | <propiedad>+;

Los posibles valores de esta propiedad son:

Propiedad transition-duration

La propiedad transition-duration indica el tiempo que tardará en realizarse la transición.

transition-duration: <tiempo>;

El valor <tiempo>, tal como ocurre en las propiedades de animación, se mide en segundos ("s") o milisegundos ("ms").

Estas dos propiedades vistas hasta ahora son las únicas imprescindibles para que la transición pueda funcionar. Sin embargo tenemos otras propiedades:

Propiedad transition-timing-function

La propiedad transition-timing-function indica los cambios de la velocidad mientras se produce la transición.

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

Los valores son los mismos que para la propiedad de animación animation-timing-function y sus resultados son prácticamente los mismos:

Propiedad transition-delay

La propiedad transition-delay indica un retraso en el tiempo en empezar la transición.

transition-delay: <tiempo>

La ejecución de la transición se retrasara el tiempo indicado en el valor <tiempo>, el cual se expresa en un número seguido por la letra "s" si está en segundos, o las letras "ms" si está en milisegundos.

Ejemplo de transición con :hover

Veamos un sencillo ejemplo de un elemento al que se le aplica una transición. Utilizaremos la pseudoclase :hover por lo que al pasar el ratón por encima del elemento se activa la transición: En primer lugar ponemos un div dentro del "body" de la página:

<div id="capa1">pasa el ratón por aquí.</div>	

y a continuación ponemos el código CSS que realizará la transición:

#capa1 { width: 80px; height: 80px; background-color: lime;
         transition-property: width; transition-duration: 2s;
         -moz-transition-property: width; -moz-transition-duration: 2s;
         -webkit-transition-property: width; -webkit-transition-duration: 2s;
         -o-transition-property: width; -o-transition-duration: 2s;
			 }
#capa1:hover { width:240px; }

El código es bastante sencillo, después de aplicar al elemento las propiedades de tamaño y color, aplicamos las propiedades de transición, las cuales debemos repetirlas con los prefijos de los distintos navegadores. A continuación, en otra regla, seleccionamos el elemento con la pseudoclase hover, en la que cambiamos la propiedad que varía.

El resultado del código lo vemos a continuacion:


pasa el ratón por aquí.

Propiedad transition tipo "shorthand"

Todas las propiedades anteriores pueden agruparse en una sola propiedad de tipo "shorthand":

transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

Como valores pondremos primero el nombre de la propiedad (transition-property), después el tiempo (transition-duration), después el tipo de velocidad de transición (transition-timing-function) y por último el retraso en la ejecución (transition-delay).

El bloque anterior puede repetirse para cada una de las propiedades; cada bloque con la propiedad, duracion, etc. irá separado del anterior por una coma.

Veamos un ejemplo un poco más complejo que el anterior, aquí utilizamos la propiedad transition tipo "shorthand".

En primer lugar introducimos un div en el código HTML:

<div id="capa2">pasa el ratón y verás como cambio.</div>

A continuación ponemos el código CSS que aunque un poco más complejo es parecido al del ejemplo anterior.

#capa2 { width: 80px; height: 80px; background-color: fuchsia; opacity: 1; 
         transition: width 2s, background-color 3s linear, opacity 3s ease-out 3s;
         -moz-transition: width 2s, background-color 3s linear, opacity 3s ease-out 3s;
         -webkit-transition: width 2s, background-color 3s linear, opacity 3s ease-out 3s;
         -o-transition: width 2s, background-color 3s linear, opacity 3s ease-out 4s;
         }
#capa2:hover { width: 240px; background-color: green; opacity: 0.2;}  

El resultado del código lo vemos a continuación:


pasa el ratón y verás como cambio.

Transiciones con javascript

Javascript nos permite cambiar las propiedades de los elementos. Si aplicamos a un elemento una transición, y después le cambiamos las propiedades con javascript, el resultado es que el cambio se produce con una transición. Esto permite crear efectos muy parecidos a las animaciones. Veamos un ejemplo en el que el usuario controla la posición de un elemento:

En primer lugar en el "body" creamos un elemento contenedor, dentro de él un elemento cuadrado y dos botones de control:

</div>
<div id="capa3">
 <div id="cuadrado">Tu decides si voy o vengo</div>
</div>
<p><input type="button" value="ahora voy" onclick="ida()" />
   <input type="button" value="ahora vengo" onclick="vuelta()" />
</p>

En el código hemos puesto los botones con los eventos que nos llevan a las funciones javascript que cambiarán el cuadrado.

Después creamos el código CSS, además de definir y posicionar los elementos, aplicamos la transición para el cuadrado:

#capa3 { width: 600px; height: 120px; background-color: silver; position: relative; } 
#cuadrado { width: 80px; height: 80px; background-color: yellow;
       position: relative; top:20px; left: 20px;
       transition: all 2s linear;
       -moz-transition: all 2s linear;
       -webkit-transition: all 2s linear;
       -o-transition: all 2s linear;
       } 

Por último creamos el código javascript en el que buscamos el elemento en el DOM y creamos las funciones asociadas a los eventos, que cambiarán las propiedades:

//buscar elemento en el DOM
elemento=document.getElementById("cuadrado")
}
//ida: cambiar posición y color de fondo.
function ida() {
         elemento.style.left="500px";
         elemento.style.backgroundColor="#90c";
         }
//vuelta: volver a posición y color original.
function vuelta() {
         elemento.style.left="20px";
         elemento.style.backgroundColor="yellow";
         }

Y el ejemplo anterior lo veremos en la página de la siguiente manera:


Tu decides si voy o vengo






En la siguiente página veremos las transformaciones, que aunque en sí mismas no son animaciones, pueden ayudarnos a conseguir algunos efectos dinámicos.

Transformaciones 2D



Manual Animación CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo