sábado, 14 de junio de 2014

Un desplazamiento simple



1. Objetivo

Vamos a desplazar, ininterrumpidamente, un caja <div> de izquierda a derecha y luego de derecha a izquierda.


2. La estructura

Vamos a crear una caja <div> con el código de identificación #caja.

<div id="caja"><p>&nbsp;</p></div>

Le vamos a aplicar un estilo muy sencillo:

#caja {
background-color: red;
position: relative;
width: 100px;
height: 100px;
}


3. La animación

Nuestra caja roja deberá desplazarse hasta una posición fijada en la mitad de la duración total y, a continuación, volverá a su posición inicial, para finalizar la animación. Necesitaremos por lo tanto tres keyframes: a 0%, 50% y 100%. Indicaremos la posición a la que deberá llegar en cada etapa con la propiedad left. Hemos llamado a la animación redBox.

@-webkit-keyframes redBox {
0% {
left: 10px;
}
50% {
left: 400px;
}
100% {
left: 10px;
}
}
@-moz-keyframes redBox {
0% {
left: 10px;
}
50% {
left: 400px;
}
100% {
left: 10px;
}
}
@keyframes ’redBox’ {
0% {
left: 10px;
}
50% {
left: 400px;
}
100% {
left: 10px;
}
}

En las propiedades CSS de la caja <div>, indicaremos las propiedades necesarias: 
  • el nombre de la animación: animation-name. 
  • la duración de la animación: animation-duration. 
  • las repeticiones de la animación: animation-iteration.

#caja {
background-color: red;
position: relative;
width: 100px;
height: 100px;
-webkit-animation-name: redBox;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: redBox;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
animation-name: redBox;
animation-duration: 5s;
animation-iteration-count: infinite;
}

O bien, con la sintaxis abreviada:

#caja {
background-color: red;
position: relative;
width: 100px;
height: 100px;
-webkit-animation: redBox 5s infinite;
-moz-animation: redBox 5s infinite;
animation: redBox 5s infinite;
}


4. La visualización

Así se verá en la pantalla:



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







No hay comentarios:

Publicar un comentario en la entrada