Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 66

Visitas el mes pasado: 148

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Introduccion a las animaciones
Desarrollo Web
animations CSS
W3CScools
CSS3 Transitions
W3CScools
CSS Animations Module Level 3
W3C Working Draft 20 March 2009
CSS Transitions Module Level 3
W3C Working Draft 01 December 2009
CSS 2D Transforms Module Level 3
W3C Working Draft 01 December 2009
CSS 3D Transforms Module Level 3
W3C Working Draft 20 March 2009
Uso de CSS transforms
mozilla: centro de documentación.
Curva de Bézier
Wikipedia.
Coordinate Transformation Matrices
Math is amazingy powerful
IE's CSS3 Transforms Translator
User Agent Man

Donativos

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




Animación en CSS3 (IV)

Transiciones

imagen css3_anim

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:


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; /*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:


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


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


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



Animación CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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