What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Add Simple CSS Animations in WordPress Posts and Pages

How to Add Simple CSS Animations in WordPress Posts and Pages

Using animations is a great way to add value to a website with some unique effects, like sliding, fading, bouncing, flashing, etc. Nowadays, it’s very common for webmasters to use CSS animations on their websites, because this can not only animate products, features or a “Call to Action” button, but also make a website look beautiful and attractive, which can improve user experience to some degree as well.

Actually, you can enable animation effect on your site by manually adding CSS animations to the WordPress theme or child theme’s stylesheet. However, for most WordPress users, especially for beginners, it’s rather annoying to deal with complex coding stuffs or something like that.

In this case, we simply use a plugin called Animate It! to show you how to add CSS animations in WordPress posts and pages with ease.

About Animate It!

Animate It! is designed and built to apply beautiful CSS animations on a WordPress posts, pages and widgets in an effective way. It has 10,000 active installs until now.

There are many good features of Animate It!. For example, it includes more than 50 animations for exit, entry and attention seeker, as well as has the capability to add diverse scroll offset on individual animation blocks and apply animation on scroll, hover and click.

Install the Animate It! Plugin in WordPress

Firstly, login to your WordPress Dashboard, then go to Plugins > Add New. On the “Add Plugins” page, enter Animate It! in the search box and you’ll find the plugin is right in the result list. Then, click the “Install Now” button and activate it upon installation.

Install And Activate Animate It

If there is anything you are not clear during the process, just visit the plugin installation tutorial.

Add CSS Animations in WordPress Posts and Pages

Once the plugin is activated, no other setting is required. Now, you can add CSS animations in posts, pages and widgets with the help of the visual editor.

To do so, simply create a new post or page, and you’ll see a new icon added to the visual editor as shown in the following screenshot.

Animate It Icon

Click on the icon and there will appear a popup page where you can customize your CSS animation.

Firstly, select an animation style from the dropdown list. There are a variety of options for you to choose from, including bounce, flash, pulse, shake, etc. Next, specify the animation delay time and duration time in seconds.

Select Animation Style

Scroll down and there are 3 choices from which you can set when you want to see the animation in your post or page. Available options are Click, Hover and Scroll.

Once you have finished with the settings, you can click the “Animate it” button to preview the animation. Then, click the “Insert” button to add the animation to your WordPress post or page.

Animation Detailed Settings

Now, you’ll see that there is a shortcode added with some simple dummy text in the post editor.

Shortcode with Dummy Text

To create your own animation, you need to remove the dummy text and replace it with your preferred content, images, price list or any other item you want to animate and want your visitors to focus. Below is an example of our customized content.

Example Animation

Once done, you can click the “Preview” button and you’ll find the animated content is in action. Finally, just click the “Save Draft” or “Publish” button to have it saved or published.

Till now, you should be able to add CSS animations in WordPress posts and pages using the Animate It! plugin.

Author

Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *