How to Add CSS Animations in WordPress

add CSS animation

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.

Adding CSS Animations in WordPress

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. 

There are two types of more 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 Cont animation or Typing Animation as you like. 

Final Words

I hope you got the whole process to add CSS animation in WordPress. I bet there is no other way 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Introducing New Table Block Plugin - Tableberg

X
Need help?