Las animaciones en CSS3
Desplazamiento simple
Vamos a desplazar, ininterrumpidamente, un caja de izquierda a derecha y luego de derecha a izquierda.
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: 500px;
}
100% {
left: 10px;
}
}
@-moz-keyframes redBox {
0% {
left: 10px;
}
50% {
left: 500px;
}
100% {
left: 10px;
}
}
@keyframes redBox {
0% {
left: 10px;
}
50% {
left: 500px;
}
100% {
left: 10px;
}
}
En las propiedades CSS de la caja, 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 {
position: relative;
width: 100px;
height: 100px;
-webkit-animation-name: redBox;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-name: redBox;
animation-duration: 5s;
animation-iteration-count: infinite;
}
Rotación y transparencia
Vamos a crear una animación en la cual una imagen va a girar sobre sí misma y se va a volver transparente.
Para hacer que la imagen se vuelva transparente vamos a usar la propiedad opacity. Para hacer que la imagen gire sobre ella misma vamos a usar la propiedad transform.
@-webkit-keyframes girar {
0% {
opacity: 1;
-webkit-transform: rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes girar {
0% {
opacity: 1;
-moz-transform: rotate(0deg);
}
100% {
opacity: 0;
-moz-transform: rotate(360deg);
}
}
@keyframes girar {
0% {
opacity: 1;
transform: rotate(0deg);
}
100% {
opacity: 0;
transform: rotate(360deg);
}
}
#imagen {
position: relative;
height: 96px;
width: 96px;
margin: 0 auto;
-webkit-animation: girar 5s infinite;
animation: girar 5s infinite;
}
Parpadeo
Queremos resaltar un formulario en un página web haciendo que su borde parpadee.
Para hacer que el borde del formulario parpadee, vamos a aplicarle una sombra que pasará de rojo a amarillo.
Vamos a crear una animación a la que llamaremos sombra. En la primera etapa, en el 0%, definimos una sombra roja de 15 píxeles y, en el 100%, una sombra amarilla.
@-webkit-keyframes sombra {
0% {
box-shadow: 0 0 15px red;
}
100% {
box-shadow: 0 0 15px yellow;
}
}
@-moz-keyframes sombra {
0% {
box-shadow: 0 0 15px red;
}
100% {
box-shadow: 0 0 15px yellow;
}
}
@keyframes sombra {
0% {
box-shadow: 0 0 15px red;
}
100% {
box-shadow: 0 0 15px yellow;
}
}
Vamos a aplicar esta animación al formulario. La animación tendrá un movimiento ease-in (se acelerará al final), no tendrá fin (infinite), alternará el sentido de la animación (alternate) y durará 500 milisegundos (500ms).
#registro2 {
margin: 0 auto;
width: 300px;
padding: 10px;
border: 1px solid #333;
border-radius: 10px;
/* Animación */
-webkit-animation: sombra ease-in infinite alternate 500ms;
animation: sombra ease-in infinite alternate 500ms;
}
Ventana modal
Una ventana modal es una ventana que se abre en la página web por encima del contenido en curso y que luego podemos cerrar haciendo clic con el ratón.
La ventana modal es un elemento aside que presenta el código de identificación ejemplo y que usa la clase modal. El código de identificación es importante, ya que lo vamos a usar con la pseudo-clase target.
El título del contenido es un elemento h2 y el texto del contenido es un elemento p. El botón de cierre es un vínculo que dispone de su propio código de identificación close y de un title con la etiqueta close.
El botón de cierre es un vínculo a que se encuentra dentro de la caja de la ventana modal. Sin embargo, nosotros no queremos que se vea la etiqueta del vínculo, Cerrar, en el ejemplo. Para eso, se aplica una transparencia al color del texto de dicho vínculo, que se encuentra posicionado en posición absoluta, en el borde superior derecho de su elemento padre, la ventana modal.
.modal a[href="#close"] {
position: absolute;
right: 0;
top: 0;
color: transparent;
}
En lugar del texto, queremos mostrar una aspa. Para realizar este cambio utilizamos la pseudo-clase :after y la propiedad content para insertar una X.
.modal a[href="#close"]:after {
content: ’X’;
display: block;
/* Position */
position: absolute;
right: -10px;
top: -10px;
width: 1.5em;
padding: 1px 1px 1px 2px;
/* Style */
text-decoration: none;
text-shadow: none;
text-align: center;
font-weight: bold;
background: #000;
color: #fff;
border: 3px solid #fff;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
Otra característica de esta ventana modal es que "oscurece" la ventana del navegador, es decir, el cuerpo (body) de la página web. Ese efecto se obtiene con el elemento aside. Dicho elemento utiliza la clase modal.
El estilo de la clase modal define el posicionamiento (position: fixed), aplica un fondo negro semitransparente (background: rgba(0,0,0,0.5)) y, cuando se carga la página, hace que la opacidad (opacity) sea de 0, de modo que esta no aparecerá "oscurecida". Por último, cuando se use la ventana modal, el cuerpo de la página "se ocultará" progresivamente. Esto se consigue con la propiedad transition sobre la opacidad (opacity).
.modal {
/* Overlay page content */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;
/* Hide for now */
opacity: 0;
pointer-events: none;
/* Transformación de la transparencia al abrir la ventana */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
Cuando el usuario haga clic en el botón, la ventana modal se abrirá con una animación: se visualizará progresivamente, al mismo tiempo que el fondo oscuro aparecerá también progresivamente. La animación utilizada es un cambio de escala 3D que solamente funcionará con el motor de renderizado WebKit (Safari y Chrome).
@-webkit-keyframes bounce {
0% {
-webkit-transform: scale3d(0.1,0.1,1);
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
transform: scale3d(0.1,0.1,1);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
}
55% {
-webkit-transform: scale3d(1.08,1.08,1);
-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
-moz-box-shadow: 0 10px 20px rgba(0,0,0,0);
transform: scale3d(1.08,1.08,1);
box-shadow: 0 10px 20px rgba(0,0,0,0);
}
75% {
-webkit-transform: scale3d(0.95,0.95,1);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
transform: scale3d(0.95,0.95,1);
box-shadow: 0 0 20px rgba(0,0,0,0.9);
}
100% {
-webkit-transform: scale3d(1,1,1);
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
transform: scale3d(1,1,1);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
}
}
La animación de apertura deberá aplicarse, en el momento de ocultar el cuerpo de la página (.modal:target), sobre la ventana modal que ha sido insertada como primer elemento hijo (.modal:target > div).
.modal:target > div {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
animation-name: bounce;
}
Ahora vamos a aplicar el efecto que permitirá ocultar la página.
.modal:target {
opacity: 1;
pointer-events: auto;
}
La animación de cierre aplica un cambio de escala a la ventana modal, para visualizarla con una proporción de 0.1.
@-webkit-keyframes minimise {
0% {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
100% {
-webkit-transform: scale3d(0.1,0.1,1);
transform: scale3d(0.1,0.1,1);
}
}
Por último la animación de cierre deberá aplicarse cuando se oculte la ventana modal, que ha sido insertada como primer elemento hijo (.modal > div).
.modal > div {
...
/* Aplicación de la animación de cierre */
-webkit-animation: minimise 500ms linear;
-moz-animation: minimise 500ms linear;
animation: minimise 500ms linear;
...
}