Animation is a great way to catch the attraction of visitors. These animations not only enhance the visual appeal of your site but also engage your visitors by providing a more interactive and captivating user experience. If you are looking for a way to animate elements like buttons, texts, images, or other content, then you are in the right place.

In this post, I will guide you to add CSS animation in your posts/ pages. Just go through until the end, then you can add CSS animations by yourself.

Let’s start.

Table of Contents

Method 1: Adding CSS Animations in WordPress Using Blocks Animation

You can easily add CSS animation by using an external plugin called Blocks Animation. By using this plugin, you can easily add CSS animations to your WordPress website.

Step 1: Install Blocks Animation

First, navigate to Plugins and click on the ‘Add New’ button. Search for the ‘Blocks Animation’ plugin and install it.

After the installation is complete, don’t forget to activate it.

Step 2: Add CSS Animations

Now, you can add animations to any block you want. Open the page/post and select the block you want to animate. It can be a title, paragraph, image, or any block.

After selecting the block, click on the settings icon. From here, click on Animations.

From here, you can choose any animation you like.

Step 3: Customize Animation

If you wish, you can set a delay of up to 100 milliseconds to 5 seconds to your animation from the Delay option.

You can also adjust the speed of the animation.

Make it faster or slower as you wish.

Additional Animation:

There are additional two types of animation. These are count animation and typing animation, but these are not supported by all blocks. To Add these animation effects, select the text and click on ‘More’ from the toolbar.

Then select Count animation or Typing Animation as you like.

Then, you will also be able to set the delay and speed for the animation you have chosen.

Method 2: Adding CSS Animation Using Ultimate Blocks

You can also add CSS animation on the blocks that have been added by the Ultimate Blocks plugin. Ultimate Blocks plugin comes with 25+ useful blocks that change the way you used to create your post/page. With the pro version of this plugin, you will be able to add animation to its blocks.

For example, if you add the ‘Advanced heading’ block, you will find the animation option for this block.

Then, you’ll be able to add animation and customize the speed and delay in the way you like.

In this way you will be able to add animation to all blocks by Ultimate Blocks.

To get the pro version, head to Ultimate Block’s website and get your desired plan. Once you’ve bought the plugin, go to your email inbox and download the plugin.

Now go to your WordPress Dashboard and navigate to Plugins > Add New Plugin and click on the ‘Upload Plugin‘ button.

In the next step, select the plugin file from your computer and click on the ‘Install Now‘ button. And activate the plugin.

Then click on the ‘Complete Ultimate Blocks Pro Activation Now’ link and enter your license key. Then activate the key.

You’ll get your license key in the subscription email you’ve received after purchasing the plugin.

Final Words

I hope you got the whole process to add CSS animation in WordPress.There may be other ways to add animation like this process. If you know one, comment below. If you liked the post, then share it with your friends, and don’t forget to share your thoughts in the comment box below.

Changelog