Skip to Main Content

How to add CSS animations on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Have you seen these beautiful CSS animations on popular websites? Animation effects such as content that slides, that dissipates, its bouncing images, etc…. ? Do you also want to add CSS animations to WordPress?

In this article, we are going to show you how to easily add CSS animations to WordPress without writing any code.

When and why should you use CSS animations?

CSS animations allow you to draw the user's attention to different parts of the page. You can use them to animate product features or a call-to-action button. Many websites use CSS animations when the user scrolls down the page. It adds some personality to the page and emphasizes the most important elements.

CSS animations are also faster than using 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 to your stylesheet. Child theme. However, most beginners do not want to edit their theme files or learn CSS.

That said, in this tutorial, we'll see how you can easily add CSS animations to your WordPress website.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

How to set up CSS animations

We will use a plugin for this tutorial. It allows you to create CSS animations using WYSIWYG visual editor. The first thing you need to do is install and activate the plugin Animate it!. The plugin works without configuration and there is no control panel.

Discover How to install a plugin in WordPress if you've never done it.

Just create a new post, and you'll see a new button on the visual editor toolbar.

add CSS animations on WordPress - animateit-button

By clicking on the button, you will see a new window appear in which you can design your CSS animations. The plugin supports many CSS animations which are all to choose from.

Animation-editor

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

First you need to select the animation style. After that, you need to choose the waiting time before the animation and the duration of the animation. Finally, you can specify when the animation will start.

Also go further by discovering How to Add Impressive Animations to Your Blog

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

add CSS animations to WordPress - animateon

Once you are satisfied with the settings, you can click on the button " It animates To see the preview of the animation.

Then click on the button Insertion to add animation to your post or page. You will notice that the plugin will add a shortcode with dummy content on the visual editor.

animate-shortcode

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

See also How to add interactive maps to your WordPress website

content-shortcode

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

All you have to do now is publish your content and preview it.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. ChimpMate Pro

Chimpmate is MailChimp's premium WordPress pop-up plugin, which will help you convert your readers into subscribers. It was designed to increase your email list without irritating visitors, with annoying pop-ups.ChimpMate Pro

It is fully customizable and you will master when and where to display pop-ups. Its other features are: support of several browsers and has pmultiple scheduling options, a fully customizable layout, aresponsive customer upport, iperfect integration with WooCommerce, axcellente cache management, perfect integration with multiple WordPress themes, multilingual support thanks to the WPML plugin, enot much anymore.

DownloadDemo | Web hosting

2. WooCommerce Cardstream Payment Gateway

CardStream is the only independent payment gateway provider. This premium WordPress plugin allows you to accept payments directly on your WooCommerce online store through Cardstream.

WooCommerce Cardstream Payment Gateway

It also gives you the ability to accept payments using the Cardstream hosted solution.

DownloadDemo | Web hosting

3. Data Source

DataSource is a premium WordPress plugin focused on visually presenting your data in any page of your website. It allows you to present data from CSV, XML, Excel, Google Spreadsheets, MySQL databases or custom post types as sortable and filterable table, different charts, maps and more.Data Source wordpress plugins insert graphics tables website blog form

Among its features, you will find among others: an iintuitive interface, tableaux based on the model of your data, tsortable, filterable and responsive ables, theupport of Google Maps and multilingual, aresponsive customer support, one muser manual, an iquick installation, et more

Download Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Conclusion

Here ! That's it for this tutorial, we hope it helped you learn how to integrate CSS animations in WordPress. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments.

...

This article features 1 comment

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
12 shares
Share8
tweet2
Save2