You can easily add CSS 3 animations to your WordPress Theme with the very easy and popular animate.css
by Daniel Eden.
the latest version and add the animate.min.css
file to your themes directory in a css
Enqueing the CSS
After the animate.min.css
is filed add to your themes functions.php
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...