Animate.css not animating in my Vue 3 project

Question

I'm simply trying to do some basic html animations in my Vue 3 app but the Animate.css examples aren't working.

Specifically, after installing the animate css dependency using npm install animate.css --save the sample animation code <h1 class="animate__animated animate__bounce">An animated element</h1> doesn't animate when my page loads. The header renders but just sits there, motionless.

I've tried other solutions like changing windows performance, adding animated to the class, etc, but it hasn't worked.

I see some solutions use CDN to link the library, but I don't think I should have to do that since I used npm to install it.

What am I doing wrong?

<template>
  <div class="container-fluid" id="app">
    <h1 class="animate__animated animate__bounce" style="color:white">An animated element</h1>
  </div>
</template>

Answer 1

import animate.css into your main.js file

import 'animate.css';