How To Animate Your Website Using Animate CSS

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints. You can download and see the whole documentation at https://animate.style/

Why use Animate CSS instead of the built in functionality from Oxygen Builder or Bricks

While it’s true that oxygen builder and bricks have a native animation functionality, it doesn’t hurt to have an additional way to implement animation in your development process. On our team, it streamlined our process by simply adding classes to the elements (just like Automatic CSS)

Another reason is it lets you implement a more advanced animation easily if you combined it with Javascript / jQuery .

Plugins Required

Oxygen Builder or Bricks
Advanced Script or Snippet

3 Simple step to Implement Automatic CSS

Step 1: Enqueue Automatic CSS Script

Advanced Script

Navigate to Tools > Advanced Script

On the upper right click the + button to add the script

On the left side, Type select CSS: Load from URL and on the hooks enter wp_head then on the URL Add the cdn url of the automatic CSS

Snippets

Navigate to Snippets > Add New

Add the snippet below and press “Save Changes and Activate:

function wpot_animatecss_script() {
	wp_enqueue_script( 'animate-css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpot_animatecss_scripts' );

Step 2: Add the Required Classes

Inside the Builder, add the required Classes to enable animation on the element that you want to animate.

The class to know that you want to animate the element

Animate__animated

These are classes if you want to repeat the animations.

animate__infinite
animate__repeat-3
animate__repeat-2
animate__repeat-1

Add these classes if you want to add a delay before animating

animate__delay-2s
Animate__delay-3s
animate__delay-4s
animate__delay-5s

Add these classes to adjust the speed of animation

animate__slow
animate__slower
animate__fast
animate__faster

Step 3: Add the Animation Class

Once you add the required classes, your next step is to add the animation that you want. You can check the available animation on their page. https://animate.style/

Use Cases and Examples

Call to Actions

Adding animations to call to action buttons to make it more noticeable and effective

Flash Screens & Intros

Best for branding and adding animations when loading information within the page. Adding animation to perk up your page and website. It improves the overall look and user experience of your site, just don’t overdo it.

And Many More

I’m sure there are other use cases for animation css, feel free to comment below and we are happy to try them out.

How to Animate your Website using Animate CSS