Perú

Lima,Perú

Animar con libreria Animate css elementos html

Fecha Publicación:       09 de Enero de 2020
Fecha Modificación:       17 de Marzo de 2021

→ Ir a Página Oficial Animate.css

→ Ir a Descargar animate.css aquí.

→ Ir a https://github.com/daneden/animate.css

Licencia y contribución

Animate.css tiene licencia bajo la licencia MIT. (https://opensource.org/licenses/MIT)

Como Implementar Animate css en tu web

Implementar Animate en la hoja de estilo de su documento

<head>
  <link  rel = "stylesheet"  href = "animate.min.css" >
</head >

Implementar Animate usando versión remota (alojada por CDNJS)

<head>
  <link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css" >
  <!-- o -->
  <link rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" >
</head>

Implementar Animate con preprocesador  Sass

@import '_animations.min.scss';

 

Ejemplos:

<h1 class="animated infinite bounce delay-2s">Example</h1>

 

<div class="ctn_web_adaptable  fadeInDown animated" data-wow-duration="1000ms"
 data-wow-delay="300ms" style="visibility: visible;
 animation-duration: 1000ms; animation-delay: 300ms; animation-name: fadeInDown;">	
   Ejemplo
</div>

 

Class Name			
bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello	bounceIn	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
fadeOutUp	fadeOutUpBig	flipInX	flipInY
flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp
heartBeat	


Ajuste de retraso y velocidad:

<div class="animated bounce delay-2s">Example</div>
Class Name	Delay Time
delay-1s	1s
delay-2s	2s
delay-3s	3s
delay-4s	4s
delay-5s	5s


Clase lenta, lenta, rápida y rápida

Es posible controlar la velocidad de la animación agregando estas clases, como un ejemplo a continuación:

<div class="animated bounce faster">Example</div>
Class Name	Speed Time
slow	2s
slower	3s
fast	800ms
faster	500ms

 

See the Pen Animate.css ejemplo 2 by alex huiza (@alextutor) on CodePen.



Ejemplo 2

See the Pen Animate.css ejemplo2 by alex huiza (@alextutor) on CodePen.

Leidas : 335 Veces
Compartir: