Do you want to add CSS animations in WordPress?
You can use animations to grab a visitor’s attention and highlight a page’s most important content. This can also encourage customers to click on your call-to-action buttons and links.
In this tutorial, we will show you how you can easily add CSS animations in WordPress.
Why Add CSS Animations in WordPress?
You can use CSS animations to draw the visitor’s attention to different parts of a page. For example, if you have an online store, animations can highlight a product’s most important features or biggest selling points. This can improve the user experience and increase sales.
Animations will also make your CTAs stand out, which can help you reach a specific goal, such as getting more people to subscribe to your email newsletter.
You can add CSS animations to your WordPress theme or child theme’s stylesheet. However, this takes a lot of time and effort, and if you make a mistake, it can break your website’s design and even function.
With that being said, let’s see how you can easily add CSS animations to your WordPress site. If you prefer to jump straight to a particular method, then you can use the links below:
Method 1: How to Easily Animate Any WordPress Block (Quick and Easy)
The easiest way to add a simple CSS animation is by using Blocks Animation.
This free animation plugin allows you to add an entrance animation to any block without having to write a single line of CSS. It also has a typing animation and a ticker-style effect that you can add to text and numbers.
First, you’ll need to install and activate the free plugin. If you need help, then please see our beginner’s guide on how to install a WordPress plugin.
Upon activation, open any page or post in the WordPress block editor. Then, simply click on the block that you want to animate and select the ‘Block’ tab in the right-hand menu.
You’ll see this menu has a new ‘Animations’ section.
Simply click to expand the ‘Animations’ section, and you’ll see three different options: Animations, Count Animations, and Typing Animations.
‘Animations’ are short effects that play once when the page loads. To add this kind of entrance animation to your WordPress blog, just click on the dropdown next to ‘Animation.’
This opens a menu where you can choose the animation you want to use.
The WordPress editor will show a preview of the animation, so you can try different options to see what looks the best.
By default, the entrance animation will play as soon as the page loads, but you can add a delay if you prefer. If you use multiple animations on the same page, you can even use delays to stagger them so they’re not overwhelming.
Simply open the ‘Delay’ dropdown and choose a time from the list.
You can also make the animation faster or slower using the ‘Speed’ dropdown.
As you are trying different settings, you can preview the animation at any point by clicking on ‘Replay Animation.’
The plugin also has ‘Count Animations’ and ‘Typing Animations.’
Typing Animations allow you to animate text, while Count Animations add a ticker-style effect to numbers. These animations work with any Gutenberg block that supports text or numbers, so you can use them to animate buttons, image captions, headings, and more.
To add either of these effects, start by highlighting the text or numbers that you want to animate. Then, click on the downward arrow in the small toolbar.
You can now choose ‘Count Animations’ or ‘Typing Animations’ from the dropdown menu.
If these options are grayed out, then make sure you’ve highlighted the right content. For example, you won’t be able to select ‘Count Animation’ if you’ve only highlighted text.
After adding the animation, you can use the dropdown menus in the small popup to change the speed and add an optional delay.
For example, in the following image, we are using a delay of one second.
When you’re ready to make the CSS animation live, either click on the ‘Publish’ or ‘Update’ button to apply animations on your site. Now, if you visit your WordPress website, you’ll see the animation live.
Method 2: How to Add CSS Animations to Custom Pages (Recommended)
If you want to add simple animations to the built-in WordPress blocks, then Blocks Animation is a good choice. However, if you want to really grab the visitor’s attention, keep people on your website, and get more conversions, then we recommend using SeedProd.
SeedProd is the best page builder plugin that allows you to create beautiful landing pages, sales pages, a home page, and more using a simple drag-and-drop editor.
It also comes with an ‘Animated Headline’ block that you can use to create rotating and highlighted animated headlines.
Despite the name, you can use the Animated Headline block to animate any text, including a call to action, subheading, or any other text that you want to emphasize.
SeedProd also comes with over 40 entrance animations that you can add to any block, including images, text, buttons, videos, and more.
You can even animate entire sections and columns with just a few clicks. In this way, you can create engaging animated pages within minutes.
If you’re using animations to get more conversions and sales, then SeedProd integrates with WooCommerce. It also supports many of the top email marketing services you may already be using to promote your website.
How to Setup the SeedProd Page Builder
The first thing you need to do is install and activate SeedProd. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you need to enter your license key.
You can find this information in your account on the SeedProd website. After adding the license key, simply click on ‘Verify Key.’
Create a Custom Page Design
To get started, go to SeedProd » Landing Pages and click on ‘Add New Landing Page.’
On the next screen, you’ll be asked to choose a template.
SeedProd comes with over 350 beautiful templates that are organized into different categories, such as 404-page templates and custom WooCommerce ‘thank you’ pages.
For this guide, we will show you how to create a sales page with animated text and entrance animations, but the steps will be similar no matter what kind of page you create.
Simply click on any tab to see the different templates within that category.
When you find a template you want to use, just hover your mouse over it and then click on the checkmark icon.
We’re using the ‘Zen Sales Page’ template in all our images, but you can use any template.
Next, you need to give the page a title.
SeedProd will automatically create a URL based on the page title, but you can change this to anything you want. For example, adding relevant keywords to a URL can often improve your WordPress SEO and help the page appear in relevant search results.
To learn more, please see our guide on how to do keyword research for your WordPress blog.
When you’re happy with the title and URL, click on ‘Save and Start Editing the Page.’
This will load the SeedProd drag-and-drop page editor.
On the right, you’ll see a live preview of the page design, with some settings on the left.
SeedProd comes with lots of blocks that you can add to your design, including blocks that allow you to add social share buttons, videos, contact forms, and more.
For more information, please see our guide on how to create a custom page in WordPress.
How to Add Animated Text to WordPress
To add some animated text to the page, find the Animated Headline block and drag it onto your page design.
There are two ways to animate your headline. First, the ‘Highlighted’ style adds a shape animation to your text, such as a circle or an underlined zigzag.
You can use this animation to draw attention to a particular word or phrase inside the headline. This can make your headline easier to read and understand by highlighting the most important content. It’s also a great way to draw attention to a call to action.
The Highlighted style also has a few strikethrough shapes.
You can use strikethroughs to create interesting and eye-catching effects, or it can simply add some fun to your design.
To create a Highlighted animation, just open the ‘Style’ dropdown and select ‘Highlighted.’
Next, open the ‘Shape’ dropdown and choose a shape. When you click on a shape, SeedProd will show a preview of that animation so you can try different shapes to see which one you like the most.
SeedProd also has a ‘Rotating’ animation style, which adds a transition effect to the text.
Often, animated text is the first thing visitors look at when a page loads, so it’s a great way to highlight the most important piece of text.
To create a transition animation, simply open the ‘Style’ dropdown and click on ‘Rotating.’
You can then open the ‘Animation’ dropdown and choose the type of transition you want to use, such as fade, zoom, or roll. Again, SeedProd will play the animation inside the page editor, so you can try different effects to see which you prefer.
No matter whether you are creating a ‘Highlighted’ or ‘Rotating’ animation, you can add text before and after the animated text.
Simply type into the ‘Before Headline’ and ‘After Headline’ fields. In the ‘Text’ field, add the word or phrase that you want to animate.
If you want to animate the whole headline, then simply leave the ‘Before Headline’ and ‘After Headline’ fields empty.
By default, SeedProd will play the animation on a loop, which some visitors may find annoying.
To only play the animation once, click to deactivate the ‘Infinite Loop’ switch.
By default, the animation will play for 1200 milliseconds after an 8000 milliseconds delay.
To use different values, type into the ‘Duration’ and ‘Delay’ fields. For example, you can make the animation faster by using a shorter duration.
You may also want to style the text. For example, you can change the font size and alignment.
When you’re happy with how the animated headline looks, go ahead and click on the ‘Save’ button to store your changes.
Add Entrance Animations in WordPress
Entrance animations play when the page first loads, so they are a great way to catch the visitor’s attention.
You can also use them to highlight the content visitors should look at first. For example, if you have an online marketplace, then you might animate the product’s hero image or the banner advertising your Black Friday sale.
Inside the SeedProd editor, simply click on the content you want to animate and then select the ‘Advanced’ tab in the left-hand menu.
You can then go ahead and click to expand the ‘Animation Effects’ section.
After that, simply choose an animation from the ‘Entrance Animation’ dropdown.
You can now add entrance animations to any block, section, or column simply by following the same process described above.
Publish Your CSS Animations in WordPress
When you’re happy with how the page is set up, click the dropdown menu on the ‘Save’ button and select ‘Publish.’
You can now visit this page to see the CSS animations live.
We hope this article helped you learn how to add CSS animations in WordPress. You may also want to see our guide on how to create a custom landing page in WordPress or our expert picks for the best WordPress dynamic content plugins.
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.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk
I’ve experienced that adding animation to a call-to-action button leads to slightly better conversions because the animation makes it more noticeable, and people notice it more easily. Thanks for the guide on how this works in SeedProd. I’ve had it for a relatively short time and am still discovering new things thanks to these guides.
kzain
Wow, this article came in at the perfect time! I’ve been wanting to spruce up my little website for ages, and these CSS animations seem exactly what it needs.
Especially the hover effects!
Thanks for sharing this, I’m definitely going to try out the Blocks Animation plugin. Maybe I can even convince my not-so-tech-savvy niece to help me – she’s got a great eye for design
Dennis Muthomi
I have a block that is called lottie animation and it also has animations.
What is the differences between lottie animation and CSS animation? Is it the same thing or is one advanced?
WPBeginner Support
That is a specific file type and not CSS similar to a gif.
Admin
Dennis Muthomi
I wasn’t familiar with Lottie that much before but now I understand it’s a separate file format that can also be used for animations in WordPress.
Wissam Giroud
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
WPBeginner Support
Our tutorials are for WordPress.org sites not WordPress.com sites, for a better understanding of the two, you would want to take a look at our article below:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
You would need the plan level that allows plugins to install plugins on WordPress.com
Admin
vishnu
How to add animation text on home page feature image
WPBeginner Support
You would want to reach out to the plugin’s support and they should be able to assist
Admin
amy
does this only work for blog posts? i dont see the animate it icon for website pages.
WPBeginner Support
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
twinkle chandan
how to add these in image block or any other block
WPBeginner Support
You would want to reach out to the plugin’s support for their plans to support the block editor
Admin
dimiter kirov
Does it have Gutenberg integration?
WPBeginner Support
It looks like the plugin is currently updated to work with Gutenberg
Admin
Aditi
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
WPBeginner Support
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
Admin
Muneeb
Thank You
WPBeginner Support
You’re welcome
Admin
Leo August
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?
WPBeginner Support
Hi Leo,
We used fadeIn effect.
Admin
Catherine
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?
WPBeginner Support
Hi Catherine,
You can safely install the plugin. Please see our guide on installing plugins not tested with your WordPress version for more details.
Admin
Lesa
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.
Geraldine Ward
Thank you WP Beginner Support for your answer and also thank you Mark and Hemang for your comments, both something to consider.
Geraldine Ward
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
WPBeginner Support
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
Hemang Rindani
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.
Mark Klinefelter
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.