Realizar animaciones en la página es muy fácil con CSS3
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 29
Visitas el mes pasado: 63
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Si este sitio te parece interesante puedes contribuir con una pequeña aportació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.
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.
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.
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:
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:
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:
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
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:
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:
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.
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