Skip to content

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.

View code example
<div class="bg-light p-5" data-animate="fadeIn">
  fade in
</div>
fade in

Animate on hover

Simply add an data-hover="ANIMATION-EFFECT" and optionally data-hover-out="ANIMATION-OUT-EFFECT" attributes to any element.

View code example
<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.

View code example
<h3 data-animate="flash" data-animate-infinite="1" data-animate-duration="2">Breaking news!</h3>

Breaking news!


Examples

In Effects

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
flipInX
flipInY
lightSpeedIn
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rollIn
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
slideInDown
slideInLeft
slideInRight
slideInUp

Out Effects

NOTE: these will disappear from view once the effect has run.

bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipOutX
flipOutY
lightSpeedOut
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
rollOut
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

Special Effects

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
hinge

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page