WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Easily Add CSS Animations in WordPress

How to Easily Add CSS Animations in WordPress

Last updated on December 6th, 2015 by Editorial Staff
512 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

512 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

22 Comments

Leave a Reply
  1. vishnu says:
    Jul 2, 2020 at 3:01 am

    How to add animation text on home page feature image

    Reply
    • WPBeginner Support says:
      Jul 2, 2020 at 9:10 am

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

      Reply
  2. amy says:
    Jun 18, 2020 at 11:39 am

    does this only work for blog posts? i dont see the animate it icon for website pages.

    Reply
    • WPBeginner Support says:
      Jun 19, 2020 at 8:45 am

      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 :)

      Reply
  3. twinkle chandan says:
    Jun 17, 2020 at 3:35 am

    how to add these in image block or any other block

    Reply
    • WPBeginner Support says:
      Jun 17, 2020 at 9:00 am

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

      Reply
  4. dimiter kirov says:
    Jun 17, 2019 at 5:30 pm

    Does it have Gutenberg integration?

    Reply
    • WPBeginner Support says:
      Jun 18, 2019 at 10:34 am

      It looks like the plugin is currently updated to work with Gutenberg

      Reply
  5. Aditi says:
    May 21, 2019 at 12:42 am

    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

    Reply
    • WPBeginner Support says:
      May 21, 2019 at 10:08 am

      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

      Reply
  6. Muneeb says:
    May 9, 2019 at 5:00 pm

    Thank You

    Reply
    • WPBeginner Support says:
      May 10, 2019 at 10:36 am

      You’re welcome :)

      Reply
  7. Leo August says:
    Dec 29, 2017 at 1:41 pm

    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?

    Reply
    • WPBeginner Support says:
      Dec 30, 2017 at 6:37 pm

      Hi Leo,

      We used fadeIn effect.

      Reply
  8. Catherine says:
    Dec 10, 2017 at 10:14 am

    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?

    Reply
    • WPBeginner Support says:
      Dec 10, 2017 at 7:01 pm

      Hi Catherine,

      You can safely install the plugin. Please see our guide on installing plugins not tested with your WordPress version for more details.

      Reply
  9. Lesa says:
    Sep 9, 2016 at 6:54 pm

    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.

    Reply
  10. Geraldine Ward says:
    Jul 26, 2016 at 10:13 pm

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

    Reply
  11. Geraldine Ward says:
    Jul 21, 2016 at 12:10 am

    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

    Reply
    • WPBeginner Support says:
      Jul 21, 2016 at 11:53 pm

      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.

      Reply
  12. Hemang Rindani says:
    Dec 14, 2015 at 9:57 am

    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.

    Reply
  13. Mark Klinefelter says:
    Dec 7, 2015 at 11:38 am

    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.

    Reply

Leave a Reply 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.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
TrustPulse
TrustPulse
Instantly get 15% more conversions with social proof. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
SeedProd Logo
SeedProd Coupon
Get 50% OFF SeedProd Coming Soon Page plugin for WordPress.
Cozmoslabs
Cozmoslabs Coupon
Get 15% OFF on Cozmoslabs WordPress premium plugins.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.