Add CSS3 Animations to your WordPress Theme

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
<?php //<~ don't add me in
//Animate CSS
add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' );
function wpb_animate_styles() {
wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.min.css', '3.5.0', 'all');
}

Adding the CSS Animation

<h1 class="animated bounce">My Animated Element</h1>
view raw mark-up.html hosted with ❤ by GitHub
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...
#my-animated-element {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
view raw animate.css hosted with ❤ by GitHub
Further reference.

Leave a Comment