Tupale

Como hacer Animaciones Secuanciales con CSS3 y animate.css

Se que hace mucho no escribo en el sitio ya que estamos migrando todos los contenidos a la plataforma virtual de la comunidad, pero quería compartir con ustedes un tip que estuve buscando y me pareció muy útil para diseñadores, se trata de hacer animaciones secuenciales usando solamente CSS3 (sin jQuery ni javascript) de una manera muy sencilla apoyándonos en la librería animate.css.

Para comenzar debemos descargar y linkear la librería o biblioteca animate.css a nuestro proyecto la pueden descargar desde aquí, y ahí mismo pueden encontrar un listado de las animaciones que se incluyen la librería

Una vez que tengamos la hoja de estilos animate.min.css vinculada a nuestro proyectos animar un objeto es tan simple como agregar:

<div class=”animated tada”>Mi objeto</div>

En este ejemplo “tada” es el nombre de la animación que se hará, y pueden ver el listado completo de animaciones disponibles en animate.css en la pagina desde la que se descarga la librería.

Sin embargo esto es solo la mitad del asunto ya que hasta aqui podemos aplicar animaciones a todos los objetos que queramos pero estas correrán en simultaneo al cargar el documento, y lo que buscamos en este tutorial es hacer una animación un poco mas compleja, algo asi como tener un control de linea de tiempo, esto lo logramos simplemente agregando una clase adicional y en nuestro hoja de estilos podemos agregar tres parámetros que controlaran la linea de tiempo de nuestros efectos de animación.

<div class=”animated tada miclase”>Mi objeto</div>

Y en el CSS lo siguiente

.miclase {
-webkit-animation-duration: 2s;
-webkit-animation-delay: 3s;
-webkit-animation-iteration-count:1;
}

La primera linea determina la duración de la animación, la segunda el tiempo de retardo para que se ejecute la animación (este seria el control de linea de tiempo) y la tercera linea determina la cantidad de veces que se repite la animación (puede definirse infinite).

Es importante que este ejemplo solo estoy agregando las clases con el render -webkit que funcionara en chrome y safari, para los demás navegadores deberás agregar los sufijos de render por ejemplo:

.miclase {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
-o-animation-iteration-count:1;
animation-iteration-count:1;

}

Los proximos tips y tutoriales los publicaremos en el Curso virtual de HTML5 y CSS3 de Campuzoide, recuerda que es gratis inscribirte.

Deja un comentario

A %d blogueros les gusta esto: