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:

bullhorn without animation

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.

<?php
/**
* Modify the default Features by WooThemes template
*/
function my_features_item_template( $tpl, $args ) {
$tpl = str_replace( '%%IMAGE%%', '<div class="feature-icon">
%%IMAGE%%
<div class="animation animation-1"></div>
<div class="animation animation-2"></div>
</div>', $tpl );
return $tpl;
}
add_filter( 'woothemes_features_item_template', 'my_features_item_template', 10, 2 );

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

.features .feature {
position: relative;
}
.features .animation {
content: " ";
display: none;
position: absolute;
}
.features *:hover .animation {
display: block;
}
.features .animation-1 {
-webkit-animation: fadeInRight 2s linear infinite;
-moz-animation: fadeInRight 2s linear infinite;
-o-animation: fadeInRight 2s linear infinite;
animation: fadeInRight 2s linear infinite;
background: url(/wp-content/uploads/2013/03/blast-small.png) no-repeat;
height: 62px;
left: 102px;
top: 43px;
width: 22px;
}
.features .animation-2 {
-webkit-animation: fadeInRightDelay 2s linear infinite;
-moz-animation: fadeInRightDelay 2s linear infinite;
-o-animation: fadeInRightDelay 2s linear infinite;
animation: fadeInRightDelay 2s linear infinite;
background: url(/wp-content/uploads/2013/03/blast-large.png) no-repeat;
height: 99px;
left: 115px;
top: 23px;
width: 30px;
}

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.

@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
20% {
opacity: 1;
-webkit-transform: translateX(0px);
}
80% {
opacity: 1;
-webkit-transform: translateX(0px);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(20px);
}
20% {
opacity: 1;
-moz-transform: translateX(0px);
}
80% {
opacity: 1;
-moz-transform: translateX(0px);
}
100% {
opacity: 0;
-moz-transform: translateX(20px);
}
}
@-o-keyframes fadeInRight {
0% {
opacity: 0;
-o-transform: translateX(20px);
}
20% {
opacity: 1;
-o-transform: translateX(0px);
}
80% {
opacity: 1;
-o-transform: translateX(0px);
}
100% {
opacity: 0;
-o-transform: translateX(20px);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
20% {
opacity: 1;
transform: translateX(0px);
}
80% {
opacity: 1;
transform: translateX(0px);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
@-webkit-keyframes fadeInRightDelay {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
20% {
opacity: 0;
-webkit-transform: translateX(20px);
}
40% {
opacity: 1;
-webkit-transform: translateX(0px);
}
60% {
opacity: 1;
-webkit-transform: translateX(0px);
}
80% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
}
}
@-moz-keyframes fadeInRightDelay {
0% {
opacity: 0;
-moz-transform: translateX(20px);
}
20% {
opacity: 0;
-moz-transform: translateX(20px);
}
40% {
opacity: 1;
-moz-transform: translateX(0px);
}
60% {
opacity: 1;
-moz-transform: translateX(0px);
}
80% {
opacity: 0;
-moz-transform: translateX(20px);
}
100% {
opacity: 0;
-moz-transform: translateX(20px);
}
}
@-o-keyframes fadeInRightDelay {
0% {
opacity: 0;
-o-transform: translateX(20px);
}
20% {
opacity: 0;
-o-transform: translateX(20px);
}
40% {
opacity: 1;
-o-transform: translateX(0px);
}
60% {
opacity: 1;
-o-transform: translateX(0px);
}
80% {
opacity: 0;
-o-transform: translateX(20px);
}
100% {
opacity: 0;
-o-transform: translateX(20px);
}
}
@keyframes fadeInRightDelay {
0% {
opacity: 0;
transform: translateX(20px);
}
20% {
opacity: 0;
transform: translateX(20px);
}
40% {
opacity: 1;
transform: translateX(0px);
}
60% {
opacity: 1;
transform: translateX(0px);
}
80% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}

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.

2 thoughts on “Adding CSS3 Animations to Features by WooThemes

  1. Hi Patrick Rauland,
    How to modify title of this plug in? By default its appear “Our Features” – Adi

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.