Elements:Animations
Add beautiful animation effects to elements as they come into view.
Pulsate
Simply add an
.animate-pulse-dark
(on a light background) or
.animate-pulse-light
(on a dark background) class to any element to animate it when it comes into view.
User online
<div class="position-relative px-2">
<img src="./assets/img/team/2-austin-wade-X6Uj51n5CE8-unsplash.webp" class="sq-md bg-dark rounded-circle" alt="Person">
<span class="d-block position-absolute bottom-0 start-0 ms-1 mb-1 w-10px h-10px rounded-circle bg-success animate-pulse-dark"> <span class="visually-hidden">User online</span> </span>
</div><button type="button" class="mb-1 btn btn-primary animate-pulse-dark">Primary</button>Animate on hover
Simply add an
data-hover="ANIMATION-EFFECT"
and optionally
data-hover-out="ANIMATION-OUT-EFFECT"
attributes to any element.
<i class="ion-social-usd-outline icon-5x icon-sq bg-primary text-white rounded-circle bg-shadow" data-hover="bounceOut" data-hover-out="bounceIn"></i>Animate in view
Simply add an
data-animate="ANIMATION-EFFECT"
attribute to any element to animate it when it comes into view.
<div class="bg-light p-5" data-animate="fadeIn"> fade in
</div>Effects
You can use all "in" effects that are included in the amazing animate.css plugin to animate in elements.
Using the infinite attribute can support other animation effects like pulse & flash.
If you want an element to disappear from view you can use the "out" effects.
-
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 -
rollIn -
rollOut -
zoomIn -
zoomInDown -
zoomInLeft -
zoomInRight -
zoomInUp -
zoomOut -
zoomOutDown -
zoomOutLeft -
zoomOutRight -
zoomOutUp -
slideInDown -
slideInLeft -
slideInRight -
slideInUp -
slideOutDown -
slideOutLeft -
slideOutRight -
slideOutUp
Options
Animation Delays and Durations
You can delay or alter the duration of an animation effect by including
data-animate-delay="TIME-IN-SECONDS"
and/or
data-animate-duration="TIME-IN-SECONDS"
attributes.
This can be useful for staggering animation effects, the example below delays .
1
2
3
4
5
<h3 data-animate="fadeInUp" data-animate-duration="1.5">
1
</h3>
<h3 data-animate="fadeInDown" data-animate-duration="1.5" data-animate-delay="1.5">
2
</h3>
<h3 data-animate="fadeInUp" data-animate-duration="1.5" data-animate-delay="3">
3
</h3>
<h3 data-animate="fadeInDown" data-animate-duration="1.5" data-animate-delay="4.5">
4
</h3>
<h3 data-animate="fadeInUp" data-animate-duration="1.5" data-animate-delay="6">
5
</h3>Infinite
You can add
data-animate-infinite="1"
to make an animation effect run infinitely.
Breaking news!
<h3 data-animate="flash" data-animate-infinite="1" data-animate-duration="2">
Breaking news!
</h3>Examples
In Effects
Out Effects
NOTE: these will disappear from view once the effect has run.