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:
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.
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
Publicar un comentario