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.

Leave a Comment