Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Animacion en CSS3

Realizar animaciones en la página es muy fácil con CSS3

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

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, se hace 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 : Hasta hace poco tiempo estas propiedades sólo funcionaban de forma exprimental (mediante el prefijo del navegador). La mayoría de los navegadores han incorporado ya la forma estándar en sus últimas versiones. Sólo Safari sigue utilizando la forma exprimental, por lo que en el código repetiremos las propiedades con el prefijo -webkit-. Internet Explorer incorpora las transiciones en la forma estándar en su versión 10.

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:

• none : esta palabra clave indica que no se aplican las transiciones a ninguna propiedad. Es el valor por defecto.
• all : Esta palabra clave indica que las transiciones se aplicarán a todas las propiedades que puedan admitirlas.
• <propiedad>+ : Indicamos el nombre de la propiedad o propiedades que queremos que puedan tener transiciones. Si hay más de una éstas deben ir separadas por comas.

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:

• linear : La velocidad de la transición se mantiene constante durante toda su duración.

• ease : Es el valor por defecto. La transición va lenta al principio para volverse rápida en el medio, y terminar mucho más lenta.
• ease-in : La transición se muestra lenta al principio, para coger al final su máxima velocidad.
• ease-out : La transición es rápida al principio y va disminuyendo en velocidad para ser lenta al final.
• ease-in-out : La transición va lenta al principio, se vuelve rápida a la mitad, para acabar lenta.
• cubic-bezier (n,n,n,n) : Definimos la velocidad de la transición en base a una curva cúbica de Bezier. Para ello incorporamos cuatro valores "n" que serán números decimales entre el 0 y el 1.

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>	

#capa1 { width: 80px; height: 80px; background-color: lime;
         transition-property: width; transition-duration: 2s; /*forma estándar*/
         -webkit-transition-property: width; -webkit-transition-duration: 2s;/*para Safari*/
        }
#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 repetimos con el prefijo de Safari. 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:

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;
         -webkit-transition: width 2s, background-color 3s linear, opacity 3s ease-out 3s;
         }
#capa2:hover { width: 240px; background-color: green; opacity: 0.2;}  

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

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;
       -webkit-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:

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

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com