Integrate animations in WordPress with Animate.css [Quick Guide]

7:31 pm November 7, 201614263

you ever want to give a bit of style to your blog or your WordPress website? However, you you realize that your theme is great on a lot of points, but that it does not animate your texts or images as you would like?

I suggest you then to discover the library Animate.css which will give you a multitude of possibilities in terms of actions and animations.

css_animation_01

How to use ANIMATE CSS?

You will see that there is nothing easier than to animate your web site… Let’s look at two different and simple methods to achieve the same result: the manual method and the method through a plugin.

Method 1: integrate Animate.css manually

step 1: your child theme Creation.

If your site does not yet use of child theme, I advise you all first to create one before starting any other things… If you have never done this, I suggest you to read this dedicated article or even to use a free plugin such as Child Theme Configurator for example.

step 2: test the ANIMATE CSS Library

visit the website animate.css where you can easily test different types of animations that offers this library. Simply choose an animation and click ANIMATE IT to see the Visual rendering.
Bibliothèque Animate.css

Step 3: Download the ANIMATE CSS Library

always on the site of animate.css , then click DOWNLOAD Animate.css : a new tab will open in your browser and you won’t have to copy all then paste it into a file that you name animate.css . To do this, you will need a text editor such as Sublim Text for example.
Créer un fichier Animate.css

step 4: integrate the Animate.css library to your child theme

now that you have created your child theme and your CSS file, you will need to establish a connection between the two. To do this, simply add a line of code in your file functions.php that will appeal to your file animate.css (see line 7 of the screenshot below).

Créer un fichier functions.php

Do not forget to send your file animate.css in the folder of your child theme via FTP. Now, your child theme must consist at least of 3 files: file FUNCTIONS. PHP, the file STYLE. CSS and the ANIMATE file. CSS

step 5: how to apply animations on WordPress?

In your page or your article, once that your content was written in the ‘Visual’ tab, go to the ‘text’ tab which will allow you to add any tag classes. Animations work everywhere: on the titles tags, of paragraph, images etc…

Appliquer les classes sur les balises HTML

Here’s what you need to add your tag:

  • class ‘animated’ : without it, the animation will not work. This class start the animation only to the loading of the page.
  • class ‘infinity’ : this is optional and is used to play the animation to infinity.
  • animation class: as you will have to test it on the site (step 2), this class will apply the animation you want on your tag.

Voici quelques-unes des nombreuses classes mises à votre disposition par la bibliothèque :

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • fadeIn
  • fadeOut
  • flipInX
  • lightSpeedIn
  • rotateIn
  • rotateOutDownLeft
  • hinge
  • rollOut
  • zoomIn

step 6: check animation rendering

after adding animations on the side of your WordPress administration, you can go on the side visitor in order to see if the look and feel want you.

method 2: integrate Animate.css with a plugin

Plugin Animate It

in practice, the manual method might scare some novice, this fact Daniel Eden , the developer of this library, thought to propose a free plugin: it’s extension ANIMATE IT you can find in the official WordPress plugins catalog.

Thanks to this extension, you can perform exactly the same animations found in the manual method but, in addition, you can easily assign terms to your animations such as time, the delay before the first appearance, the animation of the hover or when the scroll etc…

It is also available in manual version, but maybe it’s a little more complex to achieve (except if you help the class generator: see chapter “Bonus” ). This plugin so make life easier you!

Step 1: install the plugin

Installation Plugin Animate It

like any plugin, go to the back office of your WordPress site to add the plugin Animate It! and activate it. Then, you can find it in the SETTINGS tab > ANIMATE IT! : here, you will not have great things to set up…

Animate It Côté Admin

step 2: insert a shortcode to animate your content

indeed, it isn’t really in the settings of the plugin you have to intervene but rather within your pages and your articles:

  1. click the Animate It in the Visual tab of your article or page. A window will then appear.
  2. Set your animation in function entry (ENTRY), output (EXIT), type of animation (e.g. FADEIN), of time (DELAY), duration (DURATION) and my way to behave (linear, easeIn etc…).
  3. Test your animation by clicking on ANIMATE IT : you will see then the icon with the “magic wand” reproduce the animation that you created.
  4. Insert the shortcode when you have found the ideal animation by clicking on INSERT .
  5. Move or then create your content inside the shortcode thus generated.

Integrer les animations css

Step 3: check the Visual rendering

once you have generated your shortcode and you have applied it to your content, be sure to update your post and make you the side visitor to your site to see if the final rendering is up to your expectations.

Here’s a video that will fly over the extent of the animations that you will be able to achieve with this famous plugin:

Bonus: a valuable tip for both solutions!

This little trick will please you because it can be used as well for the manual method with plugin: this is a animation classes generator.

Générateur de classes Animate

That is to say that this generator will immediately provide the class with default settings. The benefits? Not shortcode to use, only a series of classes to apply without widening the head to nest them together.

in conclusion

the library of animation Animate.css could certainly help you add a little “fun” in your site… But be careful to use it sparingly and wisely as you may quickly tire your readers!