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.
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"/>