Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Easily Add CSS Animations in WordPress

Have you seen those beautiful CSS Animations on popular sites? Animated effects like sliding content, fade in feature boxes, bouncing images, etc. In this article, we will show you how to easily add CSS animations in WordPress without writing any code.

Pricing table animated using CSS

When and Why You Should Use CSS Animations?

CSS animations allow you to grab user’s attention on different parts of the page.

You can use them to animate product features or a call to action button.

Many websites use CSS animations as users scroll down a page. This adds a storytelling element to the page with items progressing as users scroll down.

CSS animations are also faster than flash or videos. They load quickly and are supported by most modern web browsers.

You can add CSS animations manually to your WordPress theme or child theme‘s stylesheet. However, most beginners don’t want to edit their theme files or spend time on learning CSS.

Having said that, let’s see how you can easily add CSS animations to your WordPress site.

Setting up CSS Animate! Plugin

We will be using a plugin for this tutorial. It allows you to create CSS animations using a WYSIWYG editor.

First thing you need to do is install and activate the Animate it! plugin. The plugin works out of the box and there are no settings for you to configure.

Simply create a new post, and you will notice a new button in your WordPress visual editor labeled ‘Animate it!’.

Animate it button in WordPress visual editor

Clicking on the button will bring up a popup where you can design your CSS animation. The plugin supports many CSS animations for you to choose from.

Animation editor

First you need to select an animation style. After that you need to choose the animation delay and duration time. Finally, you need to select when you want the animation to appear.

The plugin offers three choices. You can run the animation on click, hover, or scroll offset.

Select when to run the animation

Once you are satisfied with the settings, you can click on the Animate it button to see a preview of the animation.

Next, click on the insert button to add the animation into your WordPress post or page. You will notice that the plugin will add a shortcode with some dummy content inside it into post editor.

CSS animateit! shortcode in post editor

You need to delete the dummy content inside the shortcode, and replace it with your own content, images, or anything else you want to animate.

Replace dummy content inside shortcode with your own content

Now that you’re down, click to save or publish the post and then click on the preview button. You will see your content beautifully animated.

We hope this article helped you learn how to easily add CSS animations in WordPress. You may also want to see our comparison of the 5 best drag and drop WordPress page builders.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

24 CommentsLeave a Reply

  1. Can we use animation on a free plan website in wordpress? I am unable to use plugin as it prompts me to upgrade to business plan

    • You would want to reach out to the plugin’s support and they should be able to assist :)

      Admin

    • It should work on pages as well. If it is not appearing you would want to reach out to the plugin’s support and they should be able to assist :)

      Admin

    • You would want to reach out to the plugin’s support for their plans to support the block editor :)

      Admin

  2. Hello support team Recently I’m working on wordpress theme my theme already have animation box at staring of page loading I just want to change its color. what should I do…? suggest me any css trick

  3. Good article. I was looking for something just like this. One question, I’d like to use the animation used in the pricing table example at the top of the article, but I don’t see anything in Animate It that matches it. Which animation and settings does that example use?

  4. Unfortunately, WP.org says Animate It has not been tested as to its compatability with my version of WP. I just installed WP.org a fee days ago. Disappointing. Will it be approved in future?

  5. I’m looking for a specific type of animation.

    One of the services I offer is design and layout brochures.
    To display a portfolio of brochures, I would like to have just the flat front on the page that tells about the service, and when the visitor clicks the link to see more, they are taken to a page where a tri-fold brochure slowly opens up to reveal the interior.

    Do you know whether there are any animation plugins that do this?

    Thanks for any guidance you may be able to offer.

  6. Thank you WP Beginner Support for your answer and also thank you Mark and Hemang for your comments, both something to consider.

  7. I am thinking of doing an animation for a wordpress website in Adobe Animate CC but I can’t seem to find any positive information about whether I will be able to use it in wordpress – can you shed any light on this?
    Thank you
    Geraldine

    • You can export animation as a movie and upload it to YouTube and then share the video. However if it is a shorter animation like few seconds, then you can convert into an animated GIF and add it to your WordPress site.

      Admin

  8. WordPress is a great CMS that caters to many businesses with the rich functionalities it offers. The flexibility and ease of use makes it a popular CMS across the enterprises. The inbuilt framework, themes, modules and plugins make it easier for a developer to implement any complex scenario through an effortless dashboard.

    It is important to have an engaging website that enhances the user experience. Make sure to identify proper tools like social media login and sharing, images and animations that trigger user interaction. Animate It! is very useful WordPress tool designed and developed to provide an efficient and user friendly solution to apply beautiful CSS3 animations on WordPress Posts and Widgets. It allows a developer to add animations effortlessly without compromising on website security. The dashboard for Animate It! is self explanatory and a CMS developer does not require to have any programming or animation knowledge to use it.

  9. Nice articles but too much animation can drastically slow down page load time. I have been through this and elimated a lot of “cute” animation stuff. Pingdom scores will go up after that.

Leave a Reply to twinkle chandan Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.