3 WordPress Animation Tricks with animate.css

3 WordPress Animation Tricks with animate.css

Animate WordPress-image of WordPress logo over title sequence storyboardHave you ever wanted WordPress animations to spice up your website with some subtle effects? The freely-available animate.css toolset can help you make it happen in most decent browsers–and won’t break things for older browsers, either. Check out the general animate.css demo, and then learn how to use it to add some hop, skip, and jump to WordPress!

Essential first step for WordPress animate.css

I’ll show you different ways to animate your web content. No matter which ways you use, the first step is the same: include the “animate.css” file in your site’s “head” area.

Download the animate.css files and unzip

First, visit the animate.css github page. For now, just click the “ZIP” button to download the complete repository. Later, you’ll see how to create a custom build of the CSS to keep your included file size as small as possible.

Unzip the downloaded file and have a look inside. The complete set of animations is included in the “animate.css file,” but we’re interested in the “animate.min.css” file. It has been minified to cut down on file size.

Copy animate.min.css file to your WordPress theme folder

For this tutorial, I’m using the Twenty Eleven theme. I made a folder named “css” inside the “twentyeleven” folder, and copied the “animate.min.css” file there.

Tell WordPress to include animate.min.css in your page head

You might think it’s okay to just put a style link directly in your head area, usually found in header.php for WordPress themes. That’s a big no-no. Instead, you’ll use WordPress’ “enqueue_style” function. See the enqueue_style Codex page if you need more information on how the function works.

Open your theme’s “functions.php” file, scroll to the end, insert the following code, and save the file.

function paukai_2011_styles() {
    wp_register_style( 'animate-css',
        get_template_directory_uri() . '/css/animate.min.css',
        array(),
        '20120725',
        'screen' );
    wp_enqueue_style( 'animate-css' );
}
add_action('wp_enqueue_scripts', 'paukai_2011_styles');

Adding the stylesheet for the “wp_enqueue_scripts” hook will add it for every front side page of your site.

Animation Method 1: Manually add classes to elements in your content using the HTML editor

For this first example, just make a post with 3 paragraphs, and style the 2nd paragraph as a blockquote. Then, enter the HTML editor and add two classes to the blockquote element:

  • “animated”
  • “wobble”

Your blockquote element should look like this:

<blockquote class="animated wobble">Your content here</blockquote>

The “animated” class is required for any element you want to animate. The “wobble” class is but one of many different keyframe effects you can apply. See the animate.css homepage for a complete list of effects.

The next step

My friend–there is no next step! Save your page and view it to see that blockquote wobble.

Customizing animations

Looping the animation

The wobble is pretty neat, but it starts as soon as the page loads, and might be easy to miss. Here’s how to tell the animation to run a certain number of times. For the example, you’ll make it loop infinitely.

Back in the HTML editor for your post, add the following style declarations to the blockquote element:

-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;

Your blockquote element should look like this:

<blockquote class="animated wobble" style="-webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite;">Your content here</blockquote>

I know–that is getting completely out of hand. I’ll address that in a moment! For now, just know that you need all 4 of those declarations for these CSS3 effects to work in different browsers.

Save the page and test it out.

Delaying the animation start

Your blockquote should be wobbling back and forth, again and again. Pretty cool! It can also get annoying, but I’ll talk about that in a bit. Right now, your blockquote wobbles as soon as the page finishes loading. Here’s how to make it wait 5 seconds before wobbling.

Adding your own control classes

Instead of littering your page HTML with 4 more declarations to delay animation start, you’ll add a CSS class to your stylesheet, then apply that class to your HTML. Open your theme’s style.css file, scroll to the end, and add the following class:

.delay3 {
    -webkit-animation-delay: 5s;
      -moz-animation-delay: 5s;
        -ms-animation-delay: 5s;
          -o-animation-delay: 5s;
}

Save the file. Then, edit your post again and add the “delay3” class to your blockquote element. The class attribute should now read “animated wobble delay3”. Save your post and go have a look. The wobbling should wait 5 seconds before it starts.

Adding the “delay3” class enabled you to keep your HTML cleaner, and you can use it again on other animated elements where a 5 second delay is needed. To clean up your HTML more, move the looping declarations to a class. In your style.css file, add the following class:

.loopinf {
    -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
          -o-animation-iteration-count: infinite;
}

Save the file, edit your post, and add the “loopinf” class to your blockquote. Its class attribute will now read “animated wobble delay3 loopinf”. You should remove the entire “style” attribute you added earlier for looping the animation–your new “loopinf” class takes care of those declarations. Your blockquote element should now read:

<blockquote class="animated wobble delay3 loopinf">Your text here</blockquote>

Save the post and test. While you shouldn’t see any different behavior, your HTML is much cleaner.

Making the animation last longer

Now you can make the wobble effect occur over a longer period of time–say 5 seconds. (The default for most effects is 1 second.) This should make the effect look slower, as you stretch the same number of movements (keyframes) over a longer time.

Add the following class to your style.css file and save it:

.duration5 {
    -webkit-animation-duration: 5s !important;
      -moz-animation-duration: 5s !important;
        -ms-animation-duration: 5s !important;
          -o-animation-duration: 5s !important;
}

If you leave out !important the default duration will be used instead of your new 5 seconds. Edit your post, add the “duration5” class to your blockquote, save and test.

Animate elements on hover

I don’t know about you, but I think having an element animate like this, all by itself, is mostly annoying and useless. I’d rather animate elements in response to some user action. The simplest example is to animate the element when visitors move their mouse over it.

A quick CSS reminder

To change the styling of an element when the mouse moves over that element, we need to put the additional styles inside a ruleset targeting the pseudo-class “:hover,” like this:

myselector:hover {
    property: value;
}

For the animate.css classes, the rules that make elements actually animate are specified in the “animated” class. That selector is defined in the “animate.min.css” file, which you really shouldn’t alter, since the developer might make updates.

You need to look at the “animated” rule in “animate.css,” discover what rules make an element animate, and copy them to the “myselector:hover” rule. Then you can remove the “animated” class from your HTML element, since your new “hover” rule includes what you need.

Declarations from “animated” rule

.animated {
    -webkit-animation-duration: 1s;
      -moz-animation-duration: 1s;
        -o-animation-duration: 1s;
          animation-duration: 1s;
    -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
        -o-animation-fill-mode: both;
          animation-fill-mode: both;
}

It looks like the “animation-duration” and “fill-mode” are the important declarations to make animation begin.

Create your element’s :hover rule

In your style.css file, add the following class:

.pekanimate:hover {
    -webkit-animation-duration: 1s;
      -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
        animation-duration: 1s;
    -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
        -o-animation-fill-mode: both;
        animation-fill-mode: both;
}

Remove “animated” class from your HTML

Back in the HTML of your post, simplify the “blockquote” element. Remove the “animated” class–that’s taken care of by your “pekanimate:hover” class. You do need to leave the specific animation type class, such as “wobble.” So, set your blockquote to the following, save, and test by hovering over the blockquote on the published page.

<blockquote class="pekanimate wobble">Your content here</blockquote>

Your blockquote should wobble one time when you hover over it. Pretty cool, eh?! It will not continue to wobble if you move your mouse off and back over it. If you want to do that, you need to allow the animation to loop infinitely by adding the following to your “pekanimate:hover” class:

-webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
      -o-animation-iteration-count: infinite;

Animation Method 2: Adding classes to elements in your theme templates

We just learned a lot while implementing method 1. Requiring HTML edits to manually add classes, though, is not practical in a lot of situations.

Perhaps you have content authors uncomfortable editing HTML, but you need them to add an animated call to action (CTA) on some posts. You can make that easy on your authors by building the animated element into your theme templates.

Adding an animated element to a template.

Let’s say you want an animated element after your title and before the content on individual blog posts.

In the “Twenty Eleven” theme, the title and content for single posts are controlled by the file “content-single.php,” so open that file. The title and optional meta information are wrapped in a “header” element. You’ll add your CTA as the last element inside the “header” element.

You’ll simply add a “div” element with classes “pekanimate” and “wobble.” For now, just fill it with some nonsense text. Here is the header element after your changes:

<header>
    <h1><?php the_title(); ?></h1>
    <?php if ( 'post' == get_post_type() ) : ?>
    <div>
        <?php twentyeleven_posted_on(); ?>
    </div><!-- .entry-meta -->
    <?php endif; ?>
    <div class="pekanimate wobble">
        Here is my call to action text for the demonstration.
    </div>
</header><!-- .entry-header -->

Save those changes to “content-single.php” and go view any single blog post. When you mouse over the CTA, it should begin to wobble.

Now make the CTA stand out a bit. In your style.css file, create a new class–“pekcta”–like the following:

.pekcta{
    padding:12px;
    background-color:#ddd;
    border:4px solid #fff;
    color:#000;
    font-weight:bold;
    font-size:1.2em;
}

Then, add the “pekcta” class to your CTA element in the “content-single.php” file.

<div class="pekanimate wobble pekcta">
    Here is my call to action text for the demonstration.
</div>

Save your changed files and reload the single blog post on your site. I think you’ll agree that is a bit better than just plain text.

Making your animated element easy to edit

Now you have an animated element requiring no manual HTML editing. However, you need to be able to edit the content easily, and optionally choose to have the CTA not show at all. You’ll do that by adding a few custom meta boxes to the post editing page, then adding logic to the “content-single.php” file.

Adding the “More Fields” custom meta plugin

There are many ways to use custom field values in your posts. Indeed, you could just use the built-in custom fields panel and give your authors instructions. However, you can make the edit screens more professional and easier to use by adding custom meta boxes to the edit screen. You could code that manually, or use one of many good plugins available. I’m going to show you how to use the “More Fields” plugin.

Install and setup “More Fields”

In your dashboard, go to “Plugins > Add New,” search for “more fields,” then install and activate the “More Fields” plugin.

Setup new fields for edit screens

  1. Go to “Settings > More Fields,” and click “Add new input box” on the “More Fields” screen.
  2. Enter “Call to Action” as the title of the box.
  3. Check only “Posts” for the “Used with post types” option, since we’re only gearing single post templates to make use of the CTA.
  4. Click “Save.”
  5. After saving, the “More Fields” screen lists the new box, which you can now add fields to.
  6. Click “Edit” in the “Actions” column for your “Call to Action” box.
  7. Click “Add new field” in the “List of fields” (which is currently an empty list.)
  8. Enter “CTA Content” as the field title.
  9. Enter “pek_cta_content” as the custom field key.
  10. Enter the following as the caption:“Optionally enter call to action content, including an HTML link, to show an animated call to action under your post title.”
  11. Choose “WYSIWYG” as the field type.
  12. Click “Save.”

Check out the new edit screen

Animate WordPress-Screenshot of call to action box on edit screenNow edit a post where you want to use the CTA. Scroll down, and you’ll find the “Call to Action” box you just made.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

Note: if your main content editor is on the “HTML” tab, the Call to Action box WYSIWYG editor toolbar will not appear. Simply choose the “Visual” tab in the main content editor and refresh your page.

Enter your CTA message in the “CTA Content” field. You probably should create a link in the text, since this is a call to action. After all–your visitors need an action to perform! Save your post.

Rig your template for the new custom field

Now that you have an easy-to-use field for entering call to action content, you need to alter your template file to make use of the field. You’ll be replacing the new “pekcta” div we made earlier.

Replace the entire “pekcta” div in your “content-single.php” file with the following:

<?php
// retrieve cta custom field value if it exists
$cta_content = get_post_meta( get_the_ID(), 'pek_cta_content', true );
if( $cta_content ) {
    // we have content we want to display, so let's build our cta element
?>
<div>
    <?php echo $cta_content; ?>
</div>
<?php
} // end if
?>

Save the file and go reload the blog post that you added CTA text to. Great! You now have control over the CTA without editing any HTML!

Animation Method 3: Adding classes dynamically to target elements using jQuery

Method 2 showed a practical way to implement animated elements. Now I’ll show you how to animate in a more interactive way by starting and stopping animations of one element (a slide) based on actions your visitor takes with another element (a link.)

In-Content slider

You’re going to give authors the option of creating a slider, right from the Edit Post screen. I’m taking an example from the animate.css author’s site and adapting  it to WordPress.

Add a box to edit screens for holding slider fields

  1. Go to “Settings > More Fields,” and click “Add new input box” on the “More Fields” screen.
  2. Enter “Post Slider” as the title of the box.
  3. Check only “Posts” for the “Used with post types” option.
  4. Click “Save.”
  5. After saving, the “More Fields” screen lists the new box, which you can now add fields to.
  6. Click “Edit” in the “Actions” column for your “Post Slider” box.
  7. Click “Add new field” in the “List of fields” (which is currently an empty list.)
  8. Enter “Slider 1 Content” as the field title.
  9. Enter “pek_slide1_content” as the custom field key.
  10. Enter the following as the caption:“Enter content for slide 1 here.”
  11. Choose “WYSIWYG” as the field type.
  12. Click “Save.”
  13. Add new fields for as many sliders as you want to allow. I recommend at least 3 and no more than 6. Be sure to change the name of the field title and custom field key to reflect the slider number. e.g., “Slider 2 Content” and “pek_slide2_content,” etc.

Ye Olde on/off switch

After adding the fields for numerous sliders, you’ll add one more field to allow the slider to be turned on or off.

  1. Add a new field with the title “Activate Slider.”
  2. Use “pek_slider_active” as the custom field key.
  3. Enter something like the following as the caption:“Check this box to make your sliders appear for this post.”
  4. Choose “Checkbox” as the field type.
  5. Click “Save.”

Add test sliders to a post

Animate WordPress-screenshot of slider entry field on edit screenWhen you’re finished adding fields to your slider box, edit a post and add some content to at least 3 of the sliders, making sure to put a check in the “Activate Slider” box.

Rig your template for the new slider fields

In the template file “content-single.php,” you need to:

  1. Check if the “Activate Slider” checkbox is on. If it is, proceed.
  2. Add a “ul” element to contain all our slides.
  3. Check for each individual slider.
  4. Create the <li> slider with appropriate classes, then dump the slider contents in there, properly escaped.
  5. Add an activation button for the slider.
  6. When all slides have been checked / added, close the “ul” element that contains all slides.
  7. Add the slider buttons HTML.

Modified content-single.php file

Download my modified version of the Twenty Eleven theme’s “content-single.php” file. It’s well-commented, so you can understand what’s going on.

After saving changes to your template file, view the sample post you made with slider content. After the post’s normal page content, you should see an unordered list containing an item for each of your slides, followed by a line of linked text items like “Slider 1,” “Slider 2,” etc.

Additional CSS for your sliders

Open your style.css file, scroll to the bottom, and add some new rules you need for the sliders to function properly.

First, some styles for the slider container: the “ul.slides”

.slides {
    -webkit-animation-delay: .5s;
      -moz-animation-delay: .5s;
        animation-delay: .5s;
    -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
        animation-fill-mode: both;
    -webkit-animation-name: fadeInUp;
      -moz-animation-name: fadeInUp;
        animation-name: fadeInUp;
    width: 100%;
    height: 400px;
    position: relative;
    margin: 1.5em 0;
}

Second, some styles for the slides themeselves: the “.slides li”

.slides li {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 96%;
    padding: 2%;
    list-style: none;
    background: #fff;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0 0 2px 1px rgba(0,0,0,.1);
    -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
          backface-visibility: hidden;
    -webkit-animation-duration: 1s
      -moz-animation-duration: 1s;
        -ms-animation-duration: 1s;
          animation-duration: 1s;
    -webkit-animation-timing-function: ease
      -moz-animation-timing-function: ease;
        -ms-animation-timing-function: ease;
          animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
          animation-fill-mode: both;
    opacity: 0;
    z-index: 1;
}

Third, styles for the inactive sliders.

When a slider needs to change from being visible to the user to invisible, it will be classed as “inactive.”

.slides .inactive {
    -webkit-animation-fill-mode: backwards;
      -moz-animation-fill-mode: backwards;
        -ms-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
    -webkit-animation-name: fadeOutRight;
      -moz-animation-name: fadeOutRight;
        -ms-animation-name: fadeOutRight;
          animation-name: fadeOutRight;
}

Fourth, styles for the active sliders.

When a slider needs to become visible, it will be classed as “active.”

.slides .active {
    -webkit-animation-name: fadeInLeft;
      -moz-animation-name: fadeInLeft;
        -ms-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
    -webkit-animation-delay: .5s;
      -moz-animation-delay: .5s;
        -ms-animation-delay: .5s;
          animation-delay: .5s;
    opacity: 1 !important;
    z-index: 5;
}

Additional JavaScript for your sliders

Visitors choose which slide to see by clicking the links underneath the slider display area. When they click, the JavaScript function “slide” is called, passing in the number of the slide which the link should activate.

For this to work, you need to make a small JavaScript file available to your page in the “head.” The file contains the JavaScript function “slide.”

  1. In your theme folder, make a “js” folder, if it doesn’t already exist.
  2. In the “js” folder, create a new file named “animate-css.js”.
  3. Add the following to the file and save it:
function slide(n) {
    jQuery('.active').removeClass('active').addClass('inactive');
    jQuery('.slide' + n).addClass('active').removeClass('inactive');
}

Load the new JavaScript

Now you need to load that JavaScript for your pages. Go back to your theme’s “functions.php” file and scroll to the bottom. Previously, you enqueued some CSS here. Now you’ll enqueue the new JavaScript file.

Add the following to the end of your “paukai_2011_styles” function and save the file.

// add new JS
wp_enqueue_script(
    'animate-css-script',
    get_template_directory_uri() . '/js/animate-css.js',
    array('jquery')
);

Testing the new slider

That should do it! Refresh the post you added slider items too, and click the different slide links to watch your new slider in action.

Adding only what you need

Animate WordPress-screenshot of custom CSS build selection screenThroughout this tutorial, you’ve been using a fully-loaded animate.css file. While minimized into animate-min.css, it still clocks in at 47K.

The entire tutorial only makes use of animation effects for “wobble,” “fadeInLeft,” and “fadeOutRight.” You can build a custom css file including only the animation effects you really intend to use, thereby cutting down your file size page load time.

Build a customized animate.css

The animation effects are listed on the site under different classifications, such as “Attention seekers,” “Flippers,” and so forth. Click “uncheck all” for each of the classifications. Then just check on the three effects we’re actually using.

  • “wobble” from “Attention seekers.”
  • “fadeInLeft” from “Fading Entrances.”
  • “fadeOutRight” from “Fading Exits.”

Click “Build it” and download the resulting css. For the effects we use in this tutorial, the custom build file is only 5K–and it isn’t even minified!

Minifying the file at http://www.minifycss.com/css-compressor/ with the “High” compression level takes that down to 1.9K. NOTE: If you do this, you are required to keep the comment block that includes the license at the top of the css file. The compressor will remove such comments, but you need to keep the license text, one way or the other.

Give your custom build file whatever name you want. Copy it to your theme’s “css” folder. Finally, visit your “functions.php” file to edit the name of the css file you want WordPress to enqueue.

Preaching restraint

Good heavens, don’t let this turn out like the old HTML <blink> tag!

Animation draws attention to some elements. If you overuse animation by adding it to too many elements, you lose the benefit of drawing attention to anything specific. Consider adding animation to only 1 or 2 key elements, like calls to action. (You should only have 1 call to action on your page anyway, but that’s not what this article is about.)

A note about accessibility

Animation should never be required in order to understand the content of your page. Remember that people using older browsers may not see any animation. Also, anyone using a screen reader to digest your site will not know of any animation you use. I’ve never heard a screen reader say “the following paragraph is wobbling!”

What do you think?

I hope you now understand the mechanics of adding animate.css effects to your WordPress site. Do you have any questions I didn’t answer well? Are there other ways you’d like to use animate.css that I didn’t cover? Let me know what you think in the comments. I’d love to help you further.

Credits

Tags: