How to enable Animate.css in Wordpress

Question

I've followed some instructions to enqueue Animate.css from this CDN: https://cdnjs.com/libraries/animate.css/. I referenced the second option: https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css in my functions.php wordpress file.

It appears that the reference is appearing in my when I load a page on my site, but when I add an Animate.css class to an image or a div, it doesn't animate the element, as expected.

Here's the code I've added to my functions.php file:

function enqueue_my_custom_styles() {
    wp_enqueue_style( 'animate-css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css', false ); 
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_styles' );

Here's a page where I've added the "pulse" class to the download icon/image, but it's not pulsing.

Answer 1

In your function.php file do this:

/** * Load Animate CSS from MaxCDN - the right way * */

function load_animate_css() {
  // Load Animate CSS
  wp_enqueue_style( 'animate-css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css' );
  
  // Load Css
  wp_enqueue_style( 'style', get_stylesheet_uri() );

}
add_action( 'wp_enqueue_scripts', 'load_animate_css' );

For animation to work add animated class to the pulse class. If you want animation to loop, also add infinite class.

So the img tag should have classes as follows:

<img src="" class="pulse infinite animated"/>