Como hacer animaciones CSS3 con animate.css facilmente

0
1107

¿Quieres aprender a hacer animaciones en CSS3?

¡No te preocupes! Soy José Ospina, del RinconDelGeek. El día de hoy de vamos a enseñar a usar una librería de animaciones de CSS3 fácilmente.

Como muchos saben, es muy importante actualmente crear una interactividad con el usuario a partir de transiciones y animaciones web. Por eso hoy, vamos a ver una librería llamada anímate.css, con la cual vamos a implementar animaciones completamente fáciles en nuestro sitio web.

Para empezar, vamos a descargar la librería en el siguiente enlace.

https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

Vamos a presionar Ctrl + S para guardarlo

Una vez guardado vamos a linkear el archivo a nuestro código.

<link rel="stylesheet" type="text/css" href="animate.css">

En este caso voy a crear un Nuevo archivo, como lo pueden observar en pantalla.

Pondré un párrafo dentro del body para empezar a usar esta librería.

¡Mi párrafo está listo! Si abrimos el archivo veremos que no abra ninguna animación en el texto. Para poder animar mi texto, mi imagen o cualquier objeto, lo que debo hacer es declarar class después de la etiqueta a animar.

Una vez hecho eso, vamos a escoger la animación las cuales estarán en esta página.

https://daneden.github.io/animate.css/

Escojeremeos la animación, en este caso escogeré “swing”, es decir dentro de mi class iria “animated swing”

class="animated swing"

Es muy importante que se agregue antes “animated” con D

Y listo chicos, ya pueden hacer la prueba.

Como pueden observar funciona completamente mi animación.

Asi de fácil es usar la librería de anímate.css, con ella podremos crear, animar, darle vida a nuestro sitio web con animaciones CSS3 facilmente.

Si te ha gustado este articulo suscríbete a nuestro canal y a nuestro sitio web, estaremos publicando más contenido similar.

¡Muchas gracias por leer!

DEJA UNA RESPUESTA

Por favor ingrese su comentario!
Por favor ingrese su nombre aquí