Elements:Animations
Add beautiful animation effects to elements as they come into view.
Basics
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-faded p-5" data-animate="fadeIn">
fade in
</div>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>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 .
View code example<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>1
2
3
4
5
Infinite
You can add
data-animate-infinite="1"
to make an animation effect run infinitely.
<h3 data-animate="flash" data-animate-infinite="1" data-animate-duration="2">Breaking news!</h3>Breaking news!
Examples
In Effects
Out Effects
NOTE: these will disappear from view once the effect has run.