Crear animaciones CSS3 fácilmente con Animate.css

Por Juan José Pino Reyes
Crear animaciones CSS3 fácilmente con Animate.css

En este tutorial aprenderemos a crear animaciones CSS3 fácilmente con la librería Animate.css

En algunas ocasiones necesitamos realizar animaciones en nuestro sitio o proyecto web de una manera rápida y sencilla, para esto les presento a Animate.css, una librería CSS3 para crear animaciones fácilmente.

Aprenderemos a trabajar con ella, primero descargamos la librería CSS3 del siguiente link: Animate.css, dando click en el enlace “Download Animate.css”.

Una vez descargado, crearemos nuestra estructura básica en HTML y agregaremos un enlace hacia el archivo “animate.min.css” que descargamos anteriormente.



   
      
   
   

   

Una vez hecho esto ya podremos mostrar diferentes tipos de animaciones en nuestra página web, para esto, dentro del elemento afectado debemos agregar algunos valores en la propiedad “class” como los siguientes:

  • animated: Para identificar el elemento a animar.
  • infinite: Para que la animación siga un bucle infinito.
  • animación (Ej. shake): La animación como tal, la animación “shake” puede reemplazarse por cualquiera de las más de 70 animaciones que nos ofrece la librería.

Veamos el siguiente ejemplo con la animación “shake”:



Ahora, agregaremos 2 animaciones más en paralelo para conocer más posibilidades:



De esta manera hemos visto que con el uso de esta librería podemos crear animaciones sin necesidad de JavaScript o conocimientos de CSS3, lo recomendable es aprender CSS3 y conocer el funcionamiento de estas animaciones por un tema de formación, optimización y para crear nuestras propias animaciones.

Recuerda que puedes revisar todas las animaciones antes de emplearlas en el siguiente link Animate.css

Así mismo, si deseas realizar estas animaciones usando CSS3 sin hacer uso de esta librería, tenemos un Curso de CSS3 que te podría interesar.

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Juan José Pino Reyes

Juan José Pino Reyes

CMO y Co-fundador de Devcode.la, Google Adwords Certified, Google Analytics Certified, Hootsuite Certified, con experiencia y apasionado por el Marketing digital, HTML5, CSS3, JavaScript y PHP.