Aprende a usar Animate.css rapido y facil

Usa anímate.css y ahórrate muchas líneas de código

Aprende a usar Animate.css rapido y facil

Usa anímate.css y ahórrate muchas líneas de código

Ahorra tiempo de desarrollo e implementa animate.css en tu proyecto para agilizar el desarrollo del frontend en tu pagina web y obtén resultados increíbles

La parte más interesante y divertida del desarrollo web para alguno seria el frontend ya que muchos pueden agregar funciones o animaciones que le den vida a su proyecto, por lo cual muchos prefieren ayudarse de librerías que se encuentran en internet.

Una de las opciones disponibles en internet seria Animate.css, una librería que nos trae una gran cantidad de animaciones que se implementaran en tu proyecto web sin necesidad de implementar CSS adicional.

¿Por qué animaciones CSS3?

En primer lugar, es importante justificar el uso de animaciones CSS3. En la actualidad es común el uso de efectos jQuery con funciones tan sencillas como .fadeIn() o slideUp(). A grandes rasgos, el principal problema de estos efectos es que no están acelerados por GPU, lo cual puede provocar pequeños retardos en la ejecución de la animación y, por lo tanto, afectar negativamente la experiencia del usuario.

Por el contrario, las animaciones CSS3 pueden ser aceleradas por GPU, lo que se traduce en una mejora del rendimiento. Aun así, hay que tener en cuenta que no todos los navegadores son compatibles con las animaciones CSS3. Para tener más información sobre este tema, recomiendo la lectura del artículo “Myth busting CSS animations vs Javascript” (en inglés), donde se explican de forma detallada las diferencias, ventajas e inconvenientes entre el uso de animaciones por Javascript vs CSS3.

Ahora luego de linkear el archivo CSS que descargamos de:

Animate.css

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.

Ahora veremos algunos ejemplos:

<html>
  <head>
    <link rel="stylesheet" href="animate.min.css">
  </head>
  <body>
    <h1 class="animated infinite shake">Animación shake</h1>
  </body>
</html>

Otros ejemplos mas :

<html>
  <head>
    <link rel="stylesheet" href="animate.min.css">
  </head>
  <body>
    <h1 class="animated infinite shake">Animación shake</h1>
    <h1 class="animated infinite tada">Animación tada</h1>
    <h1 class="animated infinite rubberBand">Animación rubberBand</h1>
  </body>
</html>

Visitando la pagian del creador puedes ver gran cantidad de animaciones que puedes agregar a tu pagina web.

Animate.css

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Aprende a usar Animate.css rapido y facil?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 118 veces | Publicado hace 6 meses

Más códigos de programación en CSS.

Ver scripts de CSS

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en CSS

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019