Aprende a usar Animate.css rapido y facil

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

CSS
Aprende a usar Animate.css rapido y facil

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

DESCARGAR

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


¿Quieres descargar el código fuente Aprende a usar Animate.css rapido y facil?
...por favor suscríbete gratuitamente para descargarlo

DESCARGAR

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

Whatsapp Messenger Facebook Twitter
ó copia el link

Visitado 161 veces | Publicado hace 8 meses

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

Ver scripts de CSS

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020