Mdulo 3

En este tercer mdulo veremos las mejoras que CSS3 ha incorporado en relacin a la generacin de animaciones:

Animaciones CSS3 Introduccin Conceptos Bsicos Texto Animado Tranformaciones Men Animado (implementacin)

Animaciones
Hasta el lanzamiento de CSS3, las animaciones web eran realizadas con tecnologa Flash, JavaScript o Gifs animados. Esta nueva versin de CSS nos permite desarrollar animaciones de una forma novedosa, con un cdigo ms limpio y fcil de escribir.

Introduccin
Las animaciones dentro de una pgina web existen desde hace bastante tiempo y las mismas eran posibles gracias a diferentes tecnologas. Dejando de lado a la animaciones del tipo GIF, dentro de las que nos permiten buenos resultados y fluidez, podemos citar a Flash, que logr un gran avance en este campo, y a otras tecnologas como por ejemplo Silverlight. Pero todas estas tecnologas que permitan la creacin de animaciones, requeran que se instalaran componentes adicionales en los navegadores, ya que las mismas no estaban basadas en HTML o CSS estndar.

NOTA: existe otra tecnologa que en este caso dejaremos de lado, que es el uso de las libreras JavaScript del tipo jQuery, con las que se pueden desarrollar animaciones interesantes. Ahora bien, CSS3 incorpora una nueva tecnologa para la creacin de animaciones que es mucho mas simple que el uso de JavaScript o Flash. Adems se esto, tambin posibilita la interaccin con el usuario sin la necesidad de tener que desarrollar o escribir cdigo. Ventajas Con las animaciones en CSS3 podemos prescindir en gran medida, del uso de Flash. Esto a simple vista deja entrever 3 grandes ventajas: la compatibilidad, el posicionamiento y la facilidad de desarrollo. Unos de los problemas mas grandes de compatibilidad entre dispositivos mviles, es el uso de Flash, ya que la mayora no soporta esta tecnologa. Con CSS3 nos olvidamos de este problema. Por otro lado, el evitar el uso de Flash nos trae una segunda ventaja que es la de que nuestro sitio estar ntegramente desarrollado en HTML y CSS, con lo cual no tendremos problemas de posicionamiento en indexacin en los buscadores como Google, Yahoo, MSN y otros. Y por ltimo, la facilidad de desarrollo, ya que no necesitaremos incursionar en otras tecnologa para lograr un sitio visualmente atractivo. Desventajas Quizs hoy en dia, la mayor desventaja es el poco soporte que existe para esta tecnologa. Los diferentes navegadores no se han adatado 100% al uso de animaciones CSS, aunque van en camino a ello. Por supuesto, el mayor problema de incompatibilidad lo encontramos en Internet Explorer. Para comenzar, es necesario hacerlo por el principio:

Conceptos Bsicos para las animaciones CSS

Conceptos Bsicos
El uso de las animaciones en CSS3 enriquecern notablemente cualquier sitio web. Pero para trabajar correctamente con ellas y sacar su mximo provecho, debemos conocer algunos conceptos bsicos. Fotograma Clave (keyframe)

Los fotogramas claves son, por lo general, el punto de comienzo y de fin de cada animacin. Pero tambin se utilizan fotogramas clave o keyframes, en el transcurso de una animacin para marcar algn cambio de estado de la misma. Por ejemplo, para una animacin con 5 keyframes a intervalos regulares, uno al principio, uno al final, y 4 intermedios, el cdigo CSS se definira de la siguiente forma: ?
@keyframes 'nombre_fotograma_clave' { 0% { left: 50px; } 25% { left: 100px; } 50% { left: 75px; } 75% { left: 125px; } 100% { left: 100px; } }

Como vemos, los keyframes se marcan con un porcentaje correspondiente al lugar de la animacin donde se producir el cambio o modificacin de la misma (keyframe) Y dentro de los porcentajes (o keyframes) definimos los pixeles de longitud y la alineacin donde se ubicara el fotograma dentro del DIV contenedor. Luego, para el DIV donde aplicaramos la animacin (en este caso llamado caja), utilizaramos el siguiente cdigo CSS: ?
caja { animation-name: 'nombre-fotograma-clave'; animation-duration: 30s; animation-iteration-count: 5; }

Lo que aqu definimos es: animation-name: el nombre del fotograma clave (el mismo que le pusimos en @keyframes). animation-duration: la duracin que tendr la animacin. animation-iteration-count: la veces que se repetir la animacin. NOTA: esto es solo un ejemplo de la estructura de definicin de una animacin. No es funcional. Recordemos que para esto, debemos utilizar los prefijos de los navegadores, sino no nos funcionar.

Para eso debemos agregar antes de @keyframes y cada propiedad del DIV, el prefijo -moz- (Firefox), o el prefijo -webkit- (Chrome y Safari) Tambien podemos aplicar otras propiedades de animacin como: animation-delay: indica el momento en el que comenzar la animacin. Si es 0 se ejecuta cuando se carga la pgina. animation-timing-function: esta propiedad se aplica solo entre los fotogramas clave y especifica como progresa la animacin a lo largo de un ciclo. animation-direction: define el sentido de la animacin. Si ingresarmos alternate y los ciclos de iteracin son impares, la animacin ir en la direccin normal, si no se realizar en la direccin contraria. animation: esta propiedad combina las anteriores de una forma ms resumida. Veamos un ejemplo concreto de animacin funcionando:

Texto Animado

Texto Animado

Ahora que ya hemos visto los conceptos bsicos de animacin CSS, vamos a crear un texto animado que se desplace de izquierda a derecha y vuelta al principio.

Para eso, primero crearemos un DIV llamado caja con un texto negro dentro, fondo rojo, un padding de 5 px, posicionado relativamente para poder moverlo, con un alto de 30px y un ancho de 200px.

? width: 200px; height: 30px; background-color: #ff0000; color: #000000; position: relative; padding: 5px; Luego, tambin dentro de

-webkit-animation-name: movimiento-horizontal; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: movimiento-horizontal; -moz-animation-duration: 4s;

las propiedades del DIV, especificaremos los parmetros de animacin para Chrome y Safari (-webkit) y para Firefox (-moz): ?

-moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; Primero definimos el nombre de la animacin

como movimiento-horizontal. Luego le dimos una duracin de 4 segundos. Seguido de eso le especificamos que se repita indefinidas veces. En cuarto lugar le indicamos con alternate, que luego de llegar al final de la animacin, vuelva a su posicin inicial realizando el camino inverso. Las otras cuatro lneas son las mismas pero con el prefijo para Firefox (-moz) Luego debemos definir los keyframes, en este caso solo 2: el primero y el ultimo.

? @-webkit-keyframes movimiento-horizontal { from { left: 0px; } to { left: 200px; } } @-moz-keyframes movimiento-horizontal { from { left: 0px; } to { left: 200px; } } Aqu le indicamos que nuestro div se mover

desde la posicin 0px alineado contra la izquierda, hasta la posicin 200px tambin alineado contra la izquierda. (tambin para Firefox y Chrome) Luego, en el cuerpo del documento HTML, creamos un DIV llamado caja con un texto de ejemplo:

? <div id="caja">Texto animado con CSS3.</div> Y listo, tenemos creado nuestro texto animado en

CSS de forma muy sencilla y

simple.

El cdigo completo de la pagina seria:

? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Texto Animado en CSS3</title> <style type="text/css"> #caja { -webkit-animation-name: movimiento-horizontal; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate;/*vuelve a su posicion inicial */ -moz-animation-name: movimiento-horizontal; -moz-animation-duration: 4s;

-moz-animation-iteration-count: infinite; -moz-animation-direction: alternate;/*vuelve a su posicion inicial */ width: 200px; height: 30px; background-color: #ff0000; color: #000000; position: relative; padding: 5px; } @-webkit-keyframes movimiento-horizontal { from { left: 0px; } to { left: 200px; } } @-moz-keyframes movimiento-horizontal { from { left: 0px; } to { left: 200px; } } </style> </head> <body> <div id="caja">Texto animado con CSS3.</div> </body> </html> Puedes ver y descargar el ejemplo aqu:

Transiciones
Las transiciones de CSS 3 han abierto un abanico de nuevas posibilidades de interactividad. Una transicin es algo que ocurre entre un momento y otro. Si bien el tpico efecto de hover, es decir, el que al pasar el mouse sobre un elemento este cambio, es una transicin en si. Pero pasa tan rpido que prcticamente no nos damos cuenta que sucede. Por otro lado, tampoco podemos controlar el tiempo que eso tarda. Las nuevas propiedades de CSS3, nos permiten controlar el tiempo que durar ese cambio entre un estado y otro lo que generar una animacin simple. Vamos a ver un ejemplo donde tenemos una caja o DIV rectangular, y al pasar por encima con el mouse, esta cambia de estado fundindose de un color a otro.

Puedes ver el ejemplo aqu:

La propiedad para logar esto se llama transition y debemos hacer uso de los prefijos de cada navegador: -moz-transition (Firefox), -webkit-transition (Chrome y Safari), -o-transition (Opera). En realidad esta propiedad est en su formato resumido, y por lo general, no suele usarse asi, 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 Aqu la explicacin de cada una: transition-property Esta indica cual o cuales propiedades del elemento vamos a modificar; si son varias, las separamos con comas:

? transition-property: color; transition-property: color, opacity, width; transition-timing-function (no utilizada en este ejemplo)

Especifica como transcurrir el tiempo de la animacion: linear - La animacin se realiza de manera uniforme. ease La animacin acelera al inicio se retarda un poco y se acelera al final de nuevo. ease-in - La animacin se retarda al inicio, pero lo repone al final. ease-out La animacin se acelera al inicio pero se retarda al final. ease-in-out - La animacin se retarda al inicio se acelera un poco luego se retarda al final de nuevo. transition-duration Aqu indicamos el tiempo que durar el efecto. Podemos especificar uno y varios valores separados por comas; si lo hacemos, estamos diciendo al navegador que cada propiedad indicada en transition-property tiene un tiempo de transicion distinto. El valor est expresado en segundos:

? transition-duration: 1s; transition-duration: 1s, 3s;

<div class="demo"></div> Ahora creamos la clase

Entonces para nuestro ejemplo, primero creamos un DIV y le aplicamos una clase llamada demo que luego crearemos: ? demo en sus 2 estados: el normal y el correspondiente al hover, es decir, cuando pasamos el mouse por encima:

? 1 2 3 4 5 6 7 8 9 .demo { 1 width:200px; 0 height:30px; 1 background-color:#FFF; cursor: pointer; 1 border: 4px solid #78999C; 1 -moz-transition-property: background-color; 2 -moz-transition-duration: 2s; 1 -webkit-transition-property: background-color; 3 -webkit-transition-duration: 2s; -o-transition-property: background-color; 1 -o-transition-duration: 2s; 4 } 1 .demo:hover { 5 background-color:#6A2B00; background-color; 1 -moz-transition-property: -moz-transition-duration: 2s; 6 -webkit-transition-property: background-color; 1 -webkit-transition-duration: 2s; 7 -o-transition-property: background-color; 1 -o-transition-duration: 2s; } 8 1 9 2 0 2 1 2 2 Lo que indicamos aqu es que el DIV tenga un ancho de 200px, un alto de 30px, color de fondo blanco (#FFF), que el cursor encima del sea de tipo ponter (flechita), un borde de 4px color #78999C y luego la especificacin de la transicin: transition-property: background-color; (especificando que lo que voy a cambiar es el color de fondo) transition-duration: 2s; (indicando que el tiempo ser de 2 segundos)

Luego de esto, configuramos las propiedades para cuando pasemos por encima con el mouse y lo nico que modificamos es el color de fondo a #6A2B00, y luego la misma transicin para que vuelva al color original. El cdigo final completo seria:

? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Transiciones en CSS3</title> <style type="text/css"> .demo { width:200px; height:30px; background-color:#FFF; cursor: pointer; border: 4px solid #78999C; -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:#6A2B00; -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; } body { background-color: #0C2129; color: #FFF; } </style> </head> <body> <h1>Transiciones CSS3</h1> <h3> Pasa el mouse sobre el rectngulo </h3> <div></div> </body> </html> Puedes ver y descargar el ejemplo aqu:

Men Animado

En este ejemplo combinaremos la creacin de sombras, y las transiciones para crear un men animado con CSS3.

Primero crearemos la estructura HTML con los 4 items del men en formato de lista:

? <div> <ul> <li><a href="#">XHTML</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> </ul> </div> Aqu creamos un DIV y le aplicamos la clase llamada men. Dentro de l coloqu una lista desordenada UL a la cual le aplicamos

la clase nav y dentro sus respectivos tems con la etiqueta LI. Dentro de ellos colocamos el texto que servir como link. (no he agregado URL de links reales sino que estn simulados con #) Luego pasamos a la creacin de CSS.

? body { margin-left: 10px; margin-top: 10px; } ul.nav { list-style: none; display: block; width: 200px; } Primero especificamos

unos mrgenes para el body, y luego para la clase nav de lista UL, le especificamos que no tengan bullets los tems, luego que se muestre como un bloque y por ultimo un ancho de 200px. Luego especificamos las propiedades pertenecientes a la etiqueta A, es decir, a los links del men. La primeras pertenecen al link en estado normal, de reposo:

 ? ul.nav li a { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -webkit-box-shadow: 2px 2px 4px #222222; -moz-box-shadow: 2px 2px 4px #222222; -o-box-shadow: 2px 2px 4px #222222; color: #FFF; padding: 7px 15px 7px 15px; width: 100px; display: block; text-decoration: none; background-color: #1865BA; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } Con transition: all 0.3s ease-out especificamos que la misma se realice

sobre todas las propiedades del elemento (all), que dure unos 0.3 segundos y con easy-out le decimos que desacelere al final de la animacin. (ver transiciones) Luego con border-radius: 10px generamos los bordes redondeados, y con box-shadow: 2px 2px 4px #222222 generamos la sombra de cada botn. (ver creacin de sombras). Seguido a esto especificamos las propiedades visuales del texto link: color, padding, que se muestre como bloque y sin subrayar, color de fondo azul y la familia tipogrfica. Y por ltimo definiremos el estado del link cuando pasamos por encima con el mouse. Bsicamente se cambia el color de fondo azul por naranja, el color del texto de blanco a azul, la tipografa de normal a bold. Y para el movimiento en s, lo nico que cambia es el padding izquierdo que originalmente es de 15px, ahora lo configuramos en 30px.

? ul.nav li a:hover { color: #0D436A; padding: 7px 15px 7px 30px; background-color: #F90; font-weight: bold; } Dentro de la clase a con el modificador

hover podemos configurar todas las propiedades que deseamos que cambien cuando pasamos con el mouse encima del botn. Estas mismas se animarn, ya que anteriormente configuramos con all para que dentro de la transicin se animen todas las propiedades. Puedes ver y descargar el ejemplo aqu: