Animación de desplazamiento lineal con CSS3

En este sencillo tutorial haremos una pequeña animación en CSS3 de un cuadrado moviéndose (Internet Explorer y Opera no funcionan con estas características).

Lo que tenemos aquí es un objeto DIV al que le aplicaremos únicamente estilos CSS3 para poder lograr este efecto. Vamos pues a crearlo.

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

Código :

<body>
<div></div>
</body>

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

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

Código :

<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.

Crear 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:

Código :

<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>

Aplicar 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.

Código :

<style>
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í.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Animación de desplazamiento lineal con CSS3

Crear la animación

Aplicar la animación

Publica tu comentario

o puedes...