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> </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!
Twittear
No hay comentarios:
Publicar un comentario