You can easily add CSS 3 animations to your WordPress Theme with the very easy and popular
animate.css by Daniel Eden.
Download the latest version and add the
animate.min.css file to your themes directory in a
css subdirectory.
Enqueing the CSS
After the
animate.min.css is filed add to your themes
functions.php file
Adding the CSS Animation
Adding the markup us is easy, just add 2 CSS classes to the HTML element you want to animate, in the example above the first Class
animated will set the duration(1 second by default) and needs to be added to all required elements and the second Class (
bounce in this example) sets the type of animation, this one can be changed.
See all the different animations below, just select one from the dropdown list, these are also the actual
class names that you add in.
Overriding the CSS
You can override the CSS, such as the duration by just writing out some CSS in your style.css file, staying with the same example, we can give the element we are targetting a CSS ID of
my-animated-element and change the duration, the 2 H3 headings above are set to a 3 second duration using the CSS below...
Further reference.