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.
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!’.
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.
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.
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.
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.
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.
Does it have Gutenberg integration?
It looks like the plugin is currently updated to work with Gutenberg
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
You could use inspect element to see what needs changed: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Or reach out to your theme’s support and they should be able to let you know
Thank You
You’re welcome
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?
Hi Leo,
We used fadeIn effect.
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?
Hi Catherine,
You can safely install the plugin. Please see our guide on installing plugins not tested with your WordPress version for more details.
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.
Thank you WP Beginner Support for your answer and also thank you Mark and Hemang for your comments, both something to consider.
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.
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.
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.