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.
Animate.css
Just-add-water CSS animations
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.
