Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Easily Add CSS Animations in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

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.

How to 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.

A count animation, created using the Animation Blocks plugin

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.

How to animate any WordPress block

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.’

Adding a CSS animation to WordPress using a free plugin

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.

Adding loading animations to WordPress

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.

How to add loading CSS animations to WordPress

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.’

Previewing CSS animations in WordPress

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.

Adding a typing animation to a text block

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.

Creating typing animations with a WordPress plugin

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.

Adding a typing animation to WordPress

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.

An animated headline created using SeedProd

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.

SeedProd entrance animations

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.

SeedProd 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.’

Creating a new landing page with SeedProd

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.

The SeedProd template library

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.

Selecting a sales template in SeedProd

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.’

Adding a title to a custom page design

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.

The SeedProd page editor

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.

The SeedProd Animated Headline block

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.

Adding a CSS animation to a headline in WordPress

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.

A strikethrough animation created with SeedProd

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.

A curly CSS animation created with SeedProd

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.

A transition animation in WordPress

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.

Animating an entire headline in WordPress

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.

Disabling the infinite loop animation settings

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.

Changing the animation 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.

Saving a CSS animation in WordPress

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.

Adding entrance animations using SeedProd

You can then go ahead and click to expand the ‘Animation Effects’ section.

After that, simply choose an animation from the ‘Entrance Animation’ dropdown.

Adding entrance animations using SeedProd

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.’

Publishing a WordPress landing page

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.

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. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

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

28 CommentsLeave a Reply

  1. Syed Balkhi says

    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!

  2. Dennis Muthomi says

    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?

      • Dennis Muthomi says

        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.

  3. Wissam Giroud says

    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 says

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

      Admin

    • WPBeginner Support says

      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

    • WPBeginner Support says

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

      Admin

  4. Aditi says

    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

  5. Leo August says

    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?

  6. Catherine says

    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?

  7. Lesa says

    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.

  8. Geraldine Ward says

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

  9. Geraldine Ward says

    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 says

      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

  10. Hemang Rindani says

    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.

  11. Mark Klinefelter says

    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

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.