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.
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.
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.
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.
Now, you’ll see that there is a shortcode added with some simple dummy text in the post editor.
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.
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.