Aprende a usar Animate.css rápido y fácil

Usa efectos animate.css y ahórrate muchas líneas de código

Aprende a usar Animate.css rápido y fácil

Usa efectos animate.css y ahórrate muchas líneas de código

CSS

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

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 868 veces | Publicado hace 1 año

Curso Laravel 8 Página Web 100% Administrable

Mira el temario del curso en el siguiente link

VER EL CURSO

CÓDIGO FUENTE CSS

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021