{"id":89629,"date":"2012-07-31T10:00:25","date_gmt":"2012-07-31T14:00:25","guid":{"rendered":"http:\/\/wpmu.org\/?p=89629"},"modified":"2013-04-27T20:08:06","modified_gmt":"2013-04-28T00:08:06","slug":"wordpress-animation","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/wordpress-animation\/","title":{"rendered":"3 WordPress Animation Tricks with animate.css"},"content":{"rendered":"

\"AnimateHave you ever wanted WordPress animations to spice up your website with some subtle effects? The freely-available animate.css toolset<\/a> can help you make it happen in most decent browsers–and won\u2019t 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!<\/p>\n

Essential first step for WordPress animate.css<\/h2>\n

I\u2019ll show you different ways to animate your web content. No matter which ways you use, the first step is the same: include the \u201canimate.css\u201d file in your site\u2019s \u201chead\u201d area.<\/p>\n

Download the animate.css files and unzip<\/h3>\n

First, visit the animate.css github page<\/a>. For now, just click the \u201cZIP\u201d button to download the complete repository. Later, you\u2019ll see how to create a custom build of the CSS to keep your included file size as small as possible.<\/p>\n

Unzip the downloaded file and have a look inside. The complete set of animations is included in the \u201canimate.css file,\u201d but we\u2019re interested in the \u201canimate.min.css\u201d file. It has been minified to cut down on file size.<\/p>\n

Copy animate.min.css file to your WordPress theme folder<\/h3>\n

For this tutorial, I\u2019m using the Twenty Eleven theme. I made a folder named \u201ccss\u201d inside the \u201ctwentyeleven\u201d folder, and copied the \u201canimate.min.css\u201d file there.<\/p>\n

Tell WordPress to include animate.min.css in your page head<\/h3>\n

You might think it\u2019s okay to just put a style link directly in your head area, usually found in header.php for WordPress themes. That\u2019s a big no-no. Instead, you\u2019ll use WordPress\u2019 \u201cenqueue_style\u201d function. See the enqueue_style Codex page<\/a> if you need more information on how the function works.<\/p>\n

Open your theme\u2019s \u201cfunctions.php\u201d file, scroll to the end, insert the following code, and save the file.<\/p>\n

function paukai_2011_styles() {\r\n    wp_register_style( 'animate-css',\r\n        get_template_directory_uri() . '\/css\/animate.min.css',\r\n        array(),\r\n        '20120725',\r\n        'screen' );\r\n    wp_enqueue_style( 'animate-css' );\r\n}\r\nadd_action('wp_enqueue_scripts', 'paukai_2011_styles');<\/pre>\n
Adding the stylesheet for the \u201cwp_enqueue_scripts\u201d hook will add it for every front side page of your site.<\/p>\n\n
Animation Method 1: Manually add classes to elements in your content using the HTML editor<\/h2>\n
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:<\/p>\n