My goal is to incorporate some basic HTML animations into my Vue 3 application, however I am encountering issues with the Animate.css examples.
More specifically, even 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>
does not animate when the page loads. The header displays without any movement.
I have attempted various solutions such as modifying window performance, including animated
in the class, and more, but nothing seems to work.
I have noticed that some suggestions involve using CDN to link the library, however since I have installed it through npm, I believe this should not be necessary.
What could be the issue here?
<template>
<div class="container-fluid" id="app">
<h1 class="animate__animated animate__bounce" style="color:white">An animated element</h1>
</div>
</template>