Ir al contenido principal

Animación con CSS3

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Bueno ya todos sabemos que entre HTML5 y CSS3 han generado en combinación grandes herramientas para hacer tareas que antes solamente con Flash o Javascript eran posibles. Una de estas en hacer una pequeña animación como la que se muestra a continuación (Internet Explorer y Opera no funcionan con estas características).


Lo que tenemos arriba es solamente un objeto DIV al que con aplicarle ÚNICAMENTE estilos CSS3 hemos logrado este efecto. Vamos pues a crearlo.

1.- Crear el objeto:

Solo es necesario crear dentro del body de nuestro HTML una etiqueta DIV:


<body>

<div></div>

</body>

Nota: en este ejemplo usamos un DIV, pero podemos utilizar el elemento que queramos, inclusive podemos usar clases (?) o id (?) para asignarle estas propiedades.

2.- Aplicare estilo:

Crearemos una etiqueta STYLE y dentro de ella crearemos el estilo estático del objeto:

<style>

div
{
width:100px;
height:100px;
background:red;
position:relative;

}

</style>

En este estilo definimos el tamaño del DIV así como su color de fondo (rojo), es importante agregarle la propiedad de POSITION en un valor de RELATIVE, para permitir el movimiento.

3.- Creamos la animación:

Para hacer animaciones en CSS3 es necesario crear KEYFRAMES (¿les suena familiar?), y al mismo tiempo es necesario también usar prefijos para las nuevas características CSS3; de tal forma que cada navegador comprenda bien las instrucciones.

Los prefijos de cada navegador son:

-webkit-Safari y Chrome
-ms-Internet Explorer 9
-moz-Firefox
-o-Opera


Luego entonces tenemos que generar la misma instrucción para cada uno de los navegadores (aunque ya mencionamos que Opera y IE no son compatibles con esta característica).

Los KEYFRAMES son la manera en que indicamos mediante CSS3 los cambios que se generarán a algún objeto; y podemos hacerlo dando el punto de partida y el punto final; ó podemos definir en porcentajes el progreso de la animación.

Hagamos entonces el código para crear los KEYFRAMES que animarán nuestro DIV:

<style>

div
{
width:100px;
height:100px;
background:red;
position:relative;

}


@-moz-keyframes miAnimacion /* Firefox */
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes miAnimacion /* Safari & Chrome */
{
from {left:0px;}
to {left:200px;}
}

</style>

4.- Aplicamos la animación

Ahora finalmente agregamos al estilo ya existente del DIV la propiedad de animación indicándole el nombre de la animación, la duración y manera de la animación.

div
{
width:100px;
height:100px;
background:red;
position:relative;
-moz-animation:miAnimacion 5s infinite alternate; /*Firefox */
-webkit-animation:miAnimacion 5s infinite alternate; /* Safari & Chrome */
}


@-moz-keyframes miAnimacion /* Firefox */
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes miAnimacion /* Safari & Chrome */
{
from {left:0px;}
to {left:200px;}
}

</style>



En la asignación de la animación podemos modificar parámetros como: las veces que queremos repetir la animación (infinite para que sea continua); la dirección (normal o alternate), es decir si queremos que se reproduzca en un solo sentido o en ambos.


Pues bien hemos logrado hacer una animación usando solamente CSS3, si desean saber más acerca de el avance de estas nuevas propiedades en CSS3, pueden revisarlo aquí.

Gracias y felices líneas de código.

Comentarios

Entradas populares de este blog

Uso de XML con Flash y Actionscript 3.0 / Using XML with Flash and Actionscript 3.0

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

En el manejo de tecnologías web, existe una muy importante que nos permite organizar y visualizar información, esta tecnología es el XML que significa algo así como Lenguaje de Marcas (ó etiquetas mas bien) Extensible, si quieren conocer un poco más del tema aquí hay un link (español) y aquí otro (inglés).

Una ventaja de usa esta tecnología es que la información que coloquemos es este tipo de archivos se puede usar para visualizarse en diferentes interfaces con diferente tecnología, por ejemplo: un mismo archivo XML nos puede servir para almacenar el inventario de una tienda y que sea visualizado en una página web usando HTML, al mismo tiempo en una aplicación de escritorio usando AIR ( proximamente un post al respecto ) y hasta un archivo swf local, todas estas aplicaciones utilizando el mismo XML de manera qu…

Efecto "Colorear" en Flash

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Hace un par de meses tuve que generar para un banner el efecto de una imagen en tonos de grises que al pasar el mouse encima se vaya "coloreando", este ejercicio me pareció divertido e interesante y por esta razón decidí colocarlo en este blog.

Puedes comenzar a iluminar la imagen de la tortuga en cuanto aparezca.

Para generar este sencillo efecto utilizaremos elementos de: máscaras dinámicas, Sprite, UILoader, además claro de MovieClips y Listeners.

Bueno, pues definamos y acotemos el problema:


Permitir que el usuario pueda "colorear" una imagen con el mouse.Se debe mostrar una imagen inicial y una final ( mo importa si son iguales o no ).Las imágenes deben de ser externas al flash para optimizar su tamaño.Cuando el usuario presione el mouse y luego lo mueva sobre la imagen inicial deberá ir …

Usando Componentes de Flash: Paleta de Colores / Using the Flash Components: Color PIcker

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Al desarrollar en Flash Professional encontraremos un sinfin de ventajas, una de ellas son las prestaciones visuales, es decir la calidad visual de los elementos que se pueden integrar y también la interactividad y diversidad de ellos.

Cuando es necesario podemos crear nosotros mismos los elementos que necesitemos dependiendo de las características, comportamientos, vista, etc. Para nuestra fortuna existen ya varios elementos de antemano fabricados y diseñados para su correcto funcionamiento e implementación, dichos elementos se llaman "Componentes" y los podemos encontrar en el panel del mismo nombre.

Este es el primer post de una serie donde se platicará de manera práctica acerca de lo sdiferentes componentes que ya incluye Flash. En esta ocasión hablaremos del Color Picker o "Seleccionador de Co…