Adding CSS3 Animations to Features by WooThemes

Over the last couple of months I've really enjoyed using Features by WooThemes and Testimonials by WooThemes. One of the benefits of these plugins for someone who does a lot of custom theme development is that they come with no styling which makes the output very easy to manipulate. With the flexibility of this plugin I was able to easily add some simple CSS3 animations which really enhance the visual experience.

CSS3 Animations for the Ninja Warrior

We're going to add some a simple hover effect to a bullhorn image without adding any extra markup. The plan is to have the bullhorn blast sound waves when you hover over it. A still of the final product looks like this:

First, the Setup

1. Install Features by WooThemes
2. Create a new Feature and upload this plain (without the soundwaves) bullhorn image
3. Include the basic shortcode on your page [woothemes_features size=”150″]

Next, Replace the Default Features by WooThemes Content

We need to start by replacing the default content provided by the plugin. This isn't too hard because WooThemes left us a hook so we simply need to modify the content in a function we can tuck in our functions.php file.

Now let's write some CSS to use fancy animations with divs.

If, you tested your code at this point the sound blasts would appear but they wouldn't animate at all because we haven't written the CSS for the animations. Let's add the animations fadeInRight and fadeInRightDelay that are referenced in the above CSS. This part is a bit long because you need to repeat the code with browser specific prefixes.

The Results

Alright. That will do it! We have added some extra elements to our markup and we can now animate them anyway we want.

Check out this Pen!

CSS3 Animations for the Ninja Master

I haven't quite figured out how I want to accomplish this yet but what I want to do is use the previous techniques but instead of using an image, use Font Awesome or some other icon font as the basis for the image. I think using an icon font would help with both user experience and would give the front end developer more elements that he can play with.