sábado, 14 de junio de 2014

La creación de una animación



El objetivo del módulo dedicado a las animaciones es el de crear animaciones para las páginas web sin JavaScript, ni ningún framework de tipo jQuery, MooTools o Dojo.

Este breve módulo, Animation, aún está en fase de Working Draft el 19 de febrero de 2013: http://www.w3.org/TR/css3-animations/

El sitio web Can I use (http://caniuse.com/) nos indica que el módulo es bastante reconocido, pero que es preciso utilizar los prefijos de los navegadores.


Aún así, este modulo nos ofrece inmensas posibilidades y su objetivo podría ser, simplemente, el de competir con la tecnología Adobe Flash. Sin entrar en un debate sobre tecnologías que no tendría en absoluto cabida en este libro, recuerde que, por razones técnicas, Apple no autoriza las animaciones Flash en sus iPhone e iPad.

¡La solución serán las animaciones en CSS3!

Con este módulo tendremos infinitas posibilidades de creación, en cuanto comience a ser compatible con los navegadores. En los próximos meses aparecerán sin duda numerosos ejemplos en la Web.

Una animación tiene lugar en el tiempo. Para gestionar el tiempo utilizaremos las "imágenes clave", keyframes en inglés. Una imagen clave o keyframe es una etapa de una animación en la que el elemento animado sufre un cambio.

Con la regla @keyframes podrá administrar las etapas de su animación. Todas las animaciones deberán tener una regla @keyframes.

Usted deberá establecer las diferentes etapas de su animación e indicar los cambios que deberán aplicarse a las diferentes propiedades. Cada etapa podrá ser identificada con un valor en porcentaje, siendo 100 % la duración total de la animación.

Podrá indicar la duración de su animación con la propiedad animation-duration.

El movimiento de la animación estará gestionado por la propiedad animation-timing-function. Podrá aplicar aumentos y disminuciones de la velocidad, al igual que con las transiciones.

Del mismo modo podrá indicar cuántas veces deberá repetirse la animación. Se trata de la noción de iteración. Usted podrá indicarla con la propiedad animation-iteration-count.

La propiedad animation-delay sirve para indicar que la animación deberá comenzar tras un plazo determinado, y no inmediatamente.

La propiedad animation-direction le permite indicar si la animación deberá realizarse en el sentido inverso.

La propiedad animation-play-state sirve para indicar si la animación se está ejecutando o si está en pausa.

Podrá usar la sintaxis abreviada animation siguiendo este orden: 
  • animation-name 
  • animation-duration 
  • animation-timing-function 
  • animation-delay 
  • animation-iteration-count 
  • animation-direction

Y no olvide que deberá utilizar, claro está, los prefijos propietarios de los navegadores.



Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada