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

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

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 appearance and to optimize the handling of your blog or website.

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

1. ChimpMate Pro

Chimpmate is the WordPress Plugin MailChimp's premium Pop-up, which will help you convert your readers into subscribers. It was designed to grow your email list without irritating visitors with annoying pop-ups.Chimp Mate 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 many WordPress themes, multilingual support thanks to to the WPML plugin, enot much anymore.

DownloadDemo | Web hosting

2. WooCommerce Cardstream Payment Gateway

CardStream is the only independent payment gateway provider. This WordPress Plugin premium 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 WordPress Plugin premium focused on the visual presentation of your data in any page of your website. It allows you to present data from CSV files, XML, Excel, Google Spreadsheets, MySQL databases or custom post types as sortable and filterable table, different graphs, 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.

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.

...