Getting Started

Overview

This is a preset of UnoCSS for creating beautiful animations with simple classnames.

It adapts the tailwindcss-animate TailwindCSS plugin to be compatible with UnoCSS but more flexible and user-friendly.

Installation

npm

npm install -D unocss-preset-animations

yarn

yarn add -D unocss-preset-animations

pnpm

pnpm add -D unocss-preset-animations

bun

bun add -D unocss-preset-animations

DANGER

This preset requires unocss version of v0.56.0+

WARNING

This preset is based on is based on @unocss/preset-wind or @unocss/preset-uno, please make sure they are included in the presets, otherwise it won't work as expected.

Usage

In your UnoCSS config, add this preset to the presets option:

import { defineConfig, presetUno } from 'unocss' // v0.56.0 and above required
import presetAnimations from 'unocss-preset-animations'
import type { Theme } from '@unocss/preset-uno'

export default defineConfig<Theme>({
  presets: [
    presetUno(), // This must be defined before this preset
    presetAnimations() 
  ]
})

WARNING

Note that either presetUno or presetWind must be defined before this preset.