Animated Content

Add Fade In Effect To Your Content

Put your content inside a div with class animate-fadeIn

<div class="animate-fadeIn">
-- Your content here --
</div>

Add Fade In Up Effect To Your Content

Put your content inside a div with class animate-fadeInUp

<div class="animate-fadeInUp">
-- Your content here --
</div>

Add Fade In Left Effect To Your Content

Put your content inside a div with class animate-fadeInLeft

<div class="animate-fadeInLeft">
-- Your content here --
</div>

Add Fade In Right Effect To Your Content

Put your content inside a div with class animate-fadeInRight

<div class="animate-fadeInRight">
-- Your content here --
</div>

Add Fade In Bottom Effect To Your Content

Put your content inside a div with class animate-fadeInDown

<div class="animate-fadeInDown">
-- Your content here --
</div>

Add Zoom Effect To Your Content

Put your content inside a div with class animate-zoom

<div class="animate-zoom">
-- Your content here --
</div>

Add Bounce Effect To Your Content

Put your content inside a div with class animate-bounce

<div class="animate-bounce">
-- put your content here --
</div>

Add Bounce Up Effect To Your Content

Put your content inside a div with class animate-bounceUp

<div class="animate-bounceUp">
-- put your content here --
</div>

Add Flip Effect To Your Content

Put your content inside a div with class animate-flip

<div class="animate-flip">
-- put your content here --
</div>

Animation effect to images and other elements

You can add animation effect to other elements also like images, headings, paragraph, table, form etc.

Example:

Fade In effect to image.

<img class="animate-fadeIn" src="/images/car.jpg" alt="image" />

Example:

Fade In Down effect to heading.

<h1 class="animate-fadeInDown">This is Heading One</h1>

Example:

Fade In Up effect to paragraph.

<p class="animate-fadeInUp">Your content here..</p>

Add Delay To Animation

You can delay an animation effect when it comes in view. Element animation can be delayed by 0.5 / 1 / 2 / 3 / 4 / 5 seconds.

• To delay animation by 0.5 second add class delay to the element.
• To delay animation by 1 second add class delay-1s to the element.
• To delay animation by 2 second add class delay-2s to the element.
• To delay animation by 3 second add class delay-3s to the element.
• To delay animation by 4 second add class delay-4s to the element.
• To delay animation by 5 second add class delay-5s to the element.

Example:

Add Fade In animation effect with 1 second delay.

<div class="animate-fadeIn delay-1s">
-- Your content here --
</div>

Speed Of Animation

You can also control the speed of animation.

• For fast speed add class fast to the element.
• For faster speed add class faster to the element.
• For slow speed add class slow to the element.
• For slower speed add class slower to the element.

Example:

Add Fade In animation effect with slower speed.

<div class="animate-fadeIn slower">
-- Your content here --
</div>