26 julio, 2019
Aprende a usar Animate.css rápido y fácil
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
Suscríbete a nuestro canal en Youtube
SuscríbirseLa 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:
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.
Leido 4867 veces
