How To Add CSS Animation In WordPress Without Coding

March 18th, 2017 | by Ravi Chahar || 4 Comments |

You may have seen at many websites where the content keeps bouncing. The heading or even the images show an animated effect when you scroll down.

It’s the CSS animated effect which can help you increase the user experience. Without the use of videos, you can put an attractive effect.

Do you know how to add CSS animation in WordPress without coding? Though most of the web developers suggest to editing the stylesheet of your WordPress theme which may be tricky.

In this tutorial, you will learn the easiest way.

Adding CSS Animation Using A Plugin.

If you haven’t forgotten, WordPress repository consists thousands of plugins from which one plugin can help you add CSS animation to your WordPress website.

You need to install and active the Animate it plugin.

There are a few steps you need to follow.

Step 1:- The best thing about this plugin is that you don’t need to configure its settings at first. You can directly see an animated button in your WordPress post editor.

Click on that button and then the settings will be showing.

Step 2:- There are basically three types of settings. In the “Entry” settings, you can choose the type of animation and the delay time or the time duration to which the animation should be shown.

The logo of this plugin will be showing above which is the demo. You can see the changes by clicking on the “Animate it” button.

I have tried to bounce it and it’s amazing. You can also check.

Step 3:- You can also configure the exit settings like this only. Make sure you check the demo and save the settings accordingly.

Step 4:- The final tab consists the settings of this plugin to add any extra CSS and the animation settings whether to show it while loading the page, hovering the element or anything else.

You can also set the number of repeats. It will help you maintain the animation for the HTML elements in a perfect way.

After that, save the setting by clicking on “Insert” button.

Step 5:- You will see the default code generated by the plugin. You can also see the quote to insert the content you want to animate.

Remove that line and add an image or any other content you want to make look better. I have chosen to use an image.

Step 6:- After removal of the default content line, an image has been added. You can write a paragraph. Animating the headings would be a great idea.

You can check the preview before publishing the post. If it satisfies your needs, keep going and use it again somewhere in your post and publish it.

Whenever your readers visit this page, an animated effect will be showing. Whether it’s about bouncing or sliding from one of the sides, your readers will have a better experience.

You should always look for the options which can help you create an environment to make your readers happy.

Nowadays, in most of the WordPress themes, you can find the inbuilt animated CSS. But to add to your existing theme, you either need to use a plugin or edit the style.css file.

This is the method where no coding is required and it’s recommended for the beginners.

Isn’t That Easy To Add CSS Animation In WordPress Without Coding?

People fret a lot when it comes to deal with such techie situations. But with the use of a WordPress plugin, you can solve anything.

You have to follow the steps mentioned above and within a minute, you will have the animated content on your website.

I hope now you can easily add CSS animation in WordPress without coding. You should also know how to add custom CSS to WordPress website. If you still have any doubt, feel free to drop a comment.

You can also connect with us on LinkedIn, Twitter, and Facebook.