Elements:Animations
Add beautiful animation effects to elements as they come into view.
Pulsate
Simply add an
.animate-pulse-COLOUR
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="m-3 btn btn-primary animate-pulse-primary">primary</button>
<button type="button" class="m-3 btn btn-info animate-pulse-info">info</button>
<button type="button" class="m-3 btn btn-success animate-pulse-success">success</button>
<button type="button" class="m-3 btn btn-warning animate-pulse-warning">warning</button>
<button type="button" class="m-3 btn btn-danger animate-pulse-danger">danger</button>
<button type="button" class="m-3 btn btn-dark animate-pulse-dark">dark</button>
<button type="button" class="m-3 btn btn-light animate-pulse-light">light</button>
<button type="button" class="m-3 btn btn-gray-200 animate-pulse-gray-200">gray-200</button>
<button type="button" class="m-3 btn btn-gray-300 animate-pulse-gray-300">gray-300</button>
<button type="button" class="m-3 btn btn-gray-400 animate-pulse-gray-400">gray-400</button>
<button type="button" class="m-3 btn btn-gray-500 animate-pulse-gray-500">gray-500</button>
<button type="button" class="m-3 btn btn-gray-600 animate-pulse-gray-600">gray-600</button>
<button type="button" class="m-3 btn btn-gray-700 animate-pulse-gray-700">gray-700</button>
<button type="button" class="m-3 btn btn-gray-800 animate-pulse-gray-800">gray-800</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.