ANIMACIÓN AL CARGAR LA PÁGINA CON CSS3

Una de las ventajas de saber exprimir las capacidades de CSS3, es que podemos realizar animaciones sin la necesidad de recurrir a plugins u otro tipo de lenguajes de programación.

Me refiero al uso de los Keyframes Animation, las Transitions y las Transformaciones, módulos con los que podremos lograr efectos bastante espectaculares de forma sencilla.

Como ya he dicho en anteriores ocasiones, la ventaja de utilizar CSS3 es que es ligero y versátil (sobretodo comparado con javascript). Además, en el caso de las animaciones, los efectos se suavizan, lo cual supone una mejora en la parte estética y experiencia del usuario.

En el ejemplo que voy a tratar en este artículo, vamos a combinar dos efectos sobre un mismo div. Ambos tendrán lugar en el momento de la carga de la página, y lograremos con ello dinamizar de forma atractiva nuestro site.

EL EJEMPLO

La idea consiste en:

Animar el emplazamiento de una caja: En nuestro caso utilizaremos un div, pero bien podríamos emplear cualquier otro objeto (header, footer, article, a,…). El elemento en cuestión caerá desde el marco superior del monitor, cual pieza de tetris, y se ubicará en la posición que designemos.

Animar la aparición progresiva del elemento: Quizá nos suene más como FadeIn (“desvanecimiento” en inglés). Sea como sea, lograremos con ello un efecto visual muy interesante y sutil. A mi particularmente me gusta usarlo bastante en mis Diseños y creaciones web.

El código HTML5

<div class="caja">
<p>Este objeto cae desde la parte de arriba de la pantalla, a la vez que aparece de foma suave y sutil.</p>
</div>

El código CSS3

.caja
{
width: 40%;
margin: 15% 0 0 30%; /*Margen superior del 20% y luego centramos con un margen lateral izquierdo del 30%*/
border: 1px solid;
text-align: center;
animation: aparecer 4s ease-out 1; /*Definimos un nombre para la animación (“aparecer”), un tiempo total de 4segundos de duración y un movimiento suavizado al final*/
-webkit-animation: aparecer 4s ease-out 1;/*Chrome, Safari, Android, iOs*/
-moz-animation: aparecer 4s ease-out 1; /*Firefox*/
-o-animation: aparecer 4s ease-out 1; /*Opera*/
-ms-animation: aparecer 4s ease-out 1; /*Internet Explorer*/
}

Y a continuación definimos qué propiedades queremos animar y cómo en el tiempo:

@keyframes aparecer {
from {margin-top: -50%; opacity: 0;}  /*Nótese el margen negativo para situarlo bien arriba*/
50% {margin-top: 10%; opacity: 0.2;} /*Vemos que cuando haya transcurrido el 50% del tiempo, es decir, 2s, el margen superior ha pasado de -50% a 10%, y la opacidad de 0 a 0.2*/
to {margin-top: 15%; opacity: 1;} /*Es el ultimo fotograma de la animación, o punto final*/
}

Incluimos los prefijos necesarios para todos los navegadores:

@-o-keyframes aparecer {
from {margin-top: -50%; opacity: 0;}
50% {margin-top: 10%; opacity: 0.2;}
to {margin-top: 15%; opacity: 1;}
}
@-moz-keyframes aparecer {
from {margin-top: -50%; opacity: 0;}
50% {margin-top: 10%; opacity: 0.2;}
to {margin-top: 15%; opacity: 1;}
}
@-webkit-keyframes aparecer {
from {margin-top: -50%; opacity: 0;}
50% {margin-top: 10%; opacity: 0.2;}
to {margin-top: 15%; opacity: 1;}
}
@-ms-keyframes aparecer {
from {margin-top: -50%; opacity: 0;}
50% {margin-top: 10%; opacity: 0.2;}
to {margin-top: 15%; opacity: 1;}
}

Y ya para terminar, si aprovechamos el ejemplo de mi artículo anterior, en el cual centrábamos el div en nuestra pantalla, el código quedaría del siguiente modo:

.caja
{
position: absolute;
width: 30%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
border: 1px solid;
text-align: center;
animation: aparecer 4s ease-out 1; /*Añadir los correspondientes prefijos a los diferentes navegadores*/
}
@keyframes aparecer { /*Añadir los correspondientes prefijos a los diferentes navegadores*/
from {top: -150%; opacity: 0;}
50% {top: 40%; opacity: 0.2;}
to {top: 50%; opacity: 1;}
}

Espero que te haya resultado útil. Y no olvides compartirlo en Twitter!!

Manuel Córdoba

Enlace para bookmark : Enlace permanente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *