Add Cool Animation CSS to Your WordPress Child Theme

My favorite theme author is Andre @ https://www.shapedpixels.com/. There is something clean, effective and completely transparent about the way he creates both free and premium WordPress themes. In his most recent theme, Emotions, he uses a really cool animation to the banner on the home page. Right away I knew I wanted to use the animation for other child themes, and, in particular for a client where I’m currently implementing a Longevity Pro child theme.

I was already implementing Emotions as the theme for this site and noted that the animation required certain CSS classes, like fadeInDownBig, bounceInLeft and bounceInRight. So I did some digging to find out if those were jQuery trigger classes and surprise the are not. They are pure CSS animation classes. And the whole library is available for use under the MIT Open Source license. Yay, and Wow! The author is Daniel Eden. They are available on GitHub where excellent instructions are posted.

So how do you use them in a child theme? It is actually, pretty damn simple. Just put the minified animate css file in your child theme folder and add the following code to your child theme functions.php file:

// Load animation css
wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/animate.min.css' );

and then start adding the classes to the text you want to animate. Just check out my home page at https://www.mikegriffin.me – of course that is from the version packaged with Emotions ?

File Under

Awesome WordPress Tips