Adding some Animation to your page elements

An ongoing trend with many themes nowadays is to incorporate animation to a website, such as page elements that bounce, fly in or out, drop in, etc. Emphasize Pro offers a 50 animation resource that you can use for many things. To give you an idea of what animation can do to an element, check out these few examples:


How to Add Animation

Adding animation to an element is quite easy. But first, here is an online reference to the 50 animation special effects you can try out and use: TRY IT HERE

What I’ve done is added the animate.css styles to this theme so that all you have to do is add the effect classes to your element. As a side note, special thanks to Daniel Eden for this amazing set of special effects that he has made available.

Getting Started

All you do is add two (2) classes to an element, always begin with “animated” to start the process: 

  1. animated
  2. and then the effect class such as: bounceInLeft

So for example, lets do this animation to a blockquote:

<blockquote class="animated bounceInLeft"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum.</p></blockquote>