En este experimento vamos a romper las reglas y dejarnos llevar por la diversión  que siempre supone jugar con animaciones.

Para el ejemplo he combinado tanto las animaciones (por defecto) que ofrece el nuevo Motion UI de Zurb Foundation como las que ofrece el fantástico Animate.css disponible en GitHub , creado por Daniel Eden.

Es muy importante para poner en marcha ambas librerías a la vez, seguir el orden adecuado en la carga de los archivos externos de JavaScript y CSS.

Este es el orden de carga en nuestro experimento:

Tenemos un par de estilos  para ajustar el layout del ejemplo:

Para lanzar las animaciones de Motion UI, usamos algo así:

En el ‘data-closable‘ hemos definido el tipo de animación o animaciones que queremos utilizar sobre un item concreto.
En el caso de las animaciones basadas en Animate.css  hacemos algo muy parecido, aplicando al elemento a animar clases que nos proporciona esta librería.

Un ejemplo sería este:

 

En este experimento de Motion UI y Animate.css hemos utilizado animaciones que ambas librerías traen por defecto. El objetivo era jugar un poco con ellas y aprender a hacerlas funcionar. Revisa el código fuente de nuestro ejemplo si tienes dudas.

Si quieres profundizar en Motion UI o en Animate.css, aquí tienes sus respectivas documentaciones:

 

 

Share:Tweet about this on TwitterShare on FacebookShare on Google+