Getting Started

In a project where you are using UnoCSS, run the following command:

shell

# npm
npm install --save-dev animated-unocss
# yarn
yarn add -D animated-unocss
# pnpm
pnpm install --save-dev animated-unocss

Then configure your unocss.config.ts to use the animations:

Example

typescript

import { defineConfig, presetAttributify, presetUno } from 'unocss'
import { animatedUno } from 'animated-unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    animatedUno(),
  ],
})

After proper config, you can use the animations of Animate.css the same way as you use those of UnoCss:

html

<h1 class="animated animated-bounce animated-infinite">
  Forever Bouncing Heading
</h1>

NOTES

If you are coming from classical Animate.css, please note that you need to reference the classes as .animated-... instead of .animate__....
The animations this package provides are not exactly same as that of Animate.css. We have done some cleaning up to provide you with more consistent animations.

Getting Started ​

Getting Started