How to create animated content

You can create content with animation effect. The content will animated when it comes in view.
You can add following type of animation effect to your content.

  • Bounce
  • Pulse
  • Fade In
  • Fade In Left
  • Fade In Right
  • Fade In Up
  • Fade In Bottom
  • Zoom

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 Pulse Effect To Your Content

Put your content inside a div with class animate-pulse

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

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 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 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 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-zoomIn

<div class="animate-zoomIn">
-- 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>

Note

Please disable CKEditor and use Full HTML text format when creating / editing content.

image

Our Recommendation

Our recommendation is to use a text format without CKEditor.
You can create a new input format from:
Home >> Administration >> Configuration >> Content authoring >> Text formats and editors

example.com/admin/config/content/formats